JavaScript / jQuery - Program keeps drawing after mouse left the canvas

Question

I am making a paint application using jQuery and I ran into a problem.

CodePen: https://codepen.io/mistahdukk/pen/dmaKOV

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

If the mouse leaves the canvas and the click is released and the mouse re-enters the canvas, the app will continue to draw, but I only want to make it so that it draws only when the mouse has been clicked. I don't really know how to solve this issue. Thanks.

Questions seeking debugging help should include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it within the question itself. Questions without a clear problem statement are not useful to other readers. Please see: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — Rory McCrossan, Apr 10 '18 at 12:14
If your mouseup event telling it to stop drawing is only set on the canvas it isn't going to register if you mouseup on any other part of the window. Also your code should be in your question itself, there is a reason the editor will tell you that you need to include code — Patrick Evans, Apr 10 '18 at 12:14
I've got a comment about your CodePen. I've got my Chrome browser in a small size and the output of the CodePen is with scroll bars. When I scroll down and draw, it is drawing above my cursor. Don't know if that's because of CodePen or your code, but maybe you need to know! — Takit Isy, Apr 10 '18 at 12:26
You may want to upvote helpful answers… It's strange to see an accepted with score 0 ! — Takit Isy, May 04 '18 at 09:41

Takit Isy · Accepted Answer · 2018-04-10T12:49:10.273

New answer

Try this:

var mouseDown = 0;
window.onmousedown = function() { 
  ++mouseDown;
}
window.onmouseup = function() {
  --mouseDown;
}

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    if(mouseDown) {
      down = true;
    }
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
    down =false; // <-- What you need to add
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

Inspired by the solution of this answer: JavaScript: Check if mouse button down?

⋅ ⋅ ⋅

Old answer

At the end of you javascript code, you can add down =false; on the mouseout event to get the same functionality as the mouseup event.

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
    down =false; // <-- What you need to add
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

Yes I have tried this but I wanted it so that when I re-enter the canvas and the mouse button is still pressed, to continue drawing. — Mister Dukk, Apr 10 '18 at 12:27

score 0 · Answer 2 · answered Apr 10 '18 at 12:19

0

In your mouse out event you can also set down variable to false.... copen

canvas.mousedown(function(e){
    down = true;
    draw(e);
}).mouseover(function(e){
    ctx.beginPath();
    draw(e);
}).mouseout(function(e){
  down =false;
    ctx.beginPath();
}).mousemove(draw).mouseup(function(){
    down =false;
    ctx.beginPath();
});

answered Apr 10 '18 at 12:19

Renzo Calla

7,486
2
22
37

Yes I have tried this but I wanted it so that when I re-enter the canvas and the mouse button is still pressed, to continue drawing – Mister Dukk Apr 10 '18 at 12:30

score 0 · Answer 3 · edited Feb 12 '22 at 14:50

0

JavaScript:

canvas.addEventListener('mouseleave', () => {
    drawing = false; 
})

CSS:

body {
    user-select: none; // or even better to your canvas wrapper to disable higlighting once you left click to draw on canvas again
}

edited Feb 12 '22 at 14:50

Tyler2P

2,324
26
22
31

answered Feb 10 '22 at 18:43

Dremiq

335
3
10

JavaScript / jQuery - Program keeps drawing after mouse left the canvas

3 Answers3