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

CSS jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 5

Posted by Carey Cooke
Carey Cooke
3,952 Points

mouseDown is not defined

Everything is working fine for me, I was even able to add a clear button on my own. However, in the console when I refresh the browser everything is fine with no errors. As soon as I move the mouse console pops up an error saying 'mouseDown is not defined'. I've gone through this code but I can't find what's going on. I get the error on line 65, and line 65 is where the if (mouseDown) statement starts. Can anyone help me out?

// On mouse events on the canvas
$canvas.mousedown(function(e) {
    lastEvent = e;
    mouseDown = true;
  }).mousemove(function(e){
    // Draw Lines
    if (mouseDown) {

      context.beginPath();
      context.moveTo(lastEvent.offsetX, lastEvent.offsetY); 
      context.lineTo(e.offsetX, e.offsetY);
      context.strokeStyle = color;
      context.stroke();
      lastEvent = e;
 }

}).mouseup(function() {
    mouseDown = false;

  }).mouseleave(function() {
    $canvas.mouseup();

});

1 Answer

Carey Cooke
Carey Cooke
3,952 Points
Carey Cooke
Carey Cooke
3,952 Points

I figured it out. I never set the mouseDown global variable. It's so easy to get caught up in all these complicated functions and methods and forget the simple things :)