Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perfect

Posted by Ian Horner
Ian Horner
22,587 Points

Want to draw on canvas on .mouseenter();

It seemed strange to me that you wouldn't be drawing on the canvas after you exited ( .mouseleave() ) and reentered ( mouseenter(); ).

Can anyone figure this out? I tried adding this to the mouse event chain...

.mouseenter(function(){
  if (mouseDown) {
    $canvas.mousedown();
  }
});

with this at the top

var mouseDown = false;
$canvas.mousedown(function() {
    mouseDown = true;
}).mouseup(function() {
    mouseDown = false;  
});

no dice..

Marcus Parsons
Marcus Parsons
15,719 Points

I just want to clarify what you're trying to accomplish, Ian. I know that near the end of this project you are setting the mouseDown variable flag to false upon leaving the canvas. Are you wanting to be able to draw on the canvas so long as the mouse is down regardless of whether the mouse left the canvas and came back?

Ian Horner
Ian Horner
22,587 Points

Hey Marcus. Yes, I think you put it well. I think that it should mark on the canvas on mouseDown "regardless of whether the mouse left the canvas and came back".

So if I clicked and held the mouse down and then dragged into the canvas it would draw.

and

if I clicked and held the mouse down in the canvas (drawing) and the dragged out (triggering mouseup) and THEN reentered the canvas... it would draw again.

2 Answers

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

Excellent question. I would like to know the answer to this as well.

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Ian,

All you have to do is delete the mouseleave event handler in your code. The reason why the instructor puts this in, though, is that you get some funky results when you leave the canvas at one point and come back in at another point. Since you are doing a draw action while you are outside the canvas, the program is going to draw a line between the point at which you left the canvas and the point at which you reenter. To me, it doesn't look right to do that.

But, if you still want to do something like that, you can take a look at my code for this course: https://w.trhou.se/4dwdfmqw4c