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 Perform: Part 5

Posted by Sunny Singh
Sunny Singh
1,148 Points

Can somone please explain this part in the jQuery tutorial

I don't really understand the e and event and lastEvent and .stroke and how it's working behind the scenes . The jquery api doc kinda confusing too

$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.stroke();
    lastEvent = e;
  }
}).mouseup(function(){
  mouseDown = false;
})
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

I apologize Sunny, but I'm not that advanced yet. Hope you get it figured out!

1 Answer

Gabriel D. Celery
Gabriel D. Celery
13,810 Points

Think of it like this. You click on the canvas and trigger the mousedown() event in JQuery. This mousedown() event generates an object containing a bunch of information about your click. This object is "e".

We assigned this "e" to the "lastEvent" variable. Since the content of this "e" object will constantly change (while you are moving your mouse and triggering one mousemove() event after an other) the "lastEvent" variable holding the contents of the last event will also constantly change.

So we know that this lastEvent is an object with a bunch of information about the last mouse event. Objects have properties and values including this one. What we are looking for are the offsetX and offsetY properties, since these have the information about the position of the mouse.

The rest is html. A canvas allows you to draw lines and shapes by using various commands and coordinates (I recommend reading a canvas tutorial). So what we are doing is simply manipulating the settings of the canvas dependent on where the mouse is and whether we hold it down or not.

MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points
MANUEL CERNA
MANUEL CERNA
Courses Plus Student 4,739 Points

Gabriel, thanks that helped me understand the "e". It is an object that holds key:value properites (x,y) that change as the mouse click events occur. The reason for the lastEvent variable is to hold the last key:value property that occured when your mouseup function was called. Let me know if I explained this correctly.