How to draw outside an HTML canvas element?

Question

I have an HTML canvas element and implemented a brush that captures the mousedown , mousemove and mouseup events of the canvas element. All this is great for painting on canvas. However, I don’t think I like the way you can’t continue drawing if your mouse exits the middle beat canvas. It just chopped off. This is very inexorable for a person and, in my opinion, not very convenient.

If you open Microsoft Paint and start painting with a brush or ellipse or something else, until you start working with the canvas, you can drag and drop anywhere on the screen and enter the canvas again. It also makes it easier, for example, to draw a quarter circle in the corners, because you can drag the ellipse tool off the screen. Hope this makes sense.

In any case, I was wondering if there is a way to implement this using an HTML5 canvas, or how I will implement these kinds of things. A user would never have to see something painted there; it is basically just a feature for ease of use.

Edit: The problem with many of these solutions is how to handle the coordinates. Currently, my canvas is in the middle of the screen, and the upper left canvas is (0, 0) and the lower right is (500, 500) . The work of translating coordinates should also be considered.

Edit2: I found out that, apparently, you can easily remove the borders of the canvas. For example, you can specify a negative width, height, and coordinates, and the canvas element will handle this just fine. Therefore, in general, the solution is likely to require only capturing the mousemove and mouseup document and just translating x and y to start in the upper left corner of the canvas.

Answer 1

Here is a very crude first option of how you can listen for mouse events in a window, rather than a canvas, to draw continuously:

 var logger = document.getElementById("logger"), mState = document.getElementById("mState"), mX = document.getElementById("mX"), mY = document.getElementById("mY"), cX = document.getElementById("cX"), cY = document.getElementById("cY"), c = document.getElementById("canvas"), ctx = c.getContext("2d"); var mouse = { x: 0, y: 0, state: "" }; function printCanvasLocation() { var b = c.getBoundingClientRect(); cX.innerHTML = b.top; cY.innerHTML = b.left; } function setState(mouseE, state) { mouse.x = mouseE.clientX; mouse.y = mouseE.clientY; mX.innerHTML = mouseE.clientX; mY.innerHTML = mouseE.clientY; if (state) { mState.innerHTML = state; mouse.state = state; } } window.addEventListener("mousedown", function(mouseE) { setState(mouseE, "down"); }); window.addEventListener("mouseup", function(mouseE) { setState(mouseE, "up"); }); window.addEventListener("mousemove", function(mouseE) { var offset = c.getBoundingClientRect(); var fix = { x1: (mouse.x - offset.left), y1: (mouse.y - offset.top), x2: (mouseE.clientX - offset.left), y2: (mouseE.clientY - offset.top) }; if (mouse.state === "down") { ctx.moveTo(fix.x1, fix.y1); ctx.lineTo(fix.x2, fix.y2); ctx.strokeStyle = "#000"; ctx.stroke(); } setState(mouseE); }); window.addEventListener("resize", function() { printCanvasLocation(); }); printCanvasLocation(); 

  .center { text-align: center; } canvas { background-color: lightblue; } 

 <main> <div class="center"> <canvas id="canvas" width="128" height="128">If you can see me, you should update your browser</canvas> </div> <div id="logger" role="log"> <span>State: </span><span id="mState">Unknown</span> <span>X: </span><span id="mX">Unknown</span> <span>Y: </span><span id="mY">Unknown</span> <span>Canvas X: </span><span id="cX">Unknown</span> <span>Canvas Y: </span><span id="cY">Unknown</span> </div> </main> 

Answer 2

Here is one way you can continue to draw when you visit the canvas again:

• Create a global variable and set it to true in mousedown
• Add a global mouse event so that you can catch if someone does this outside of the canvas, and if so, set the global variable to false, and with the mouse of the canvas element, of course, you must also set the same variable
• In mousemove, check that the global variable is true before drawing

To draw “outside” the canvas, for example, a quarter of the circles in the corner, I moved all events to the document level as a global handler and caught the canvas element on click and passed its client coordinates, which will be calculated using the coordinates of the document.