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

James Barrett
James Barrett
13,253 Points

Struggling to understand a couple of things in the code

1.) What is the difference between the context and canvas variables? 2.) What is the difference between lastEvent and e?

Thanks, James.

can you post the code for theses functions? So we can see them.

1 Answer

Oliver Duncan
Oliver Duncan
16,642 Points
  1. The "canvas variable" is the html canvas element on the page (see here for a tutorial: http://www.w3schools.com/canvas/default.asp). The "context" of this canvas is the variable (gotten by calling "getContext()") we use to pass instructions on where to draw. Here's a great definition of context from Apple Developer Library: "A graphics context represents a drawing destination. It contains drawing parameters and all device-specific information that the drawing system needs to perform any subsequent drawing commands."

  2. Andrew creates a global variable called "lastEvent" to store where the first mousedown() event happens. This way he can access it from within both mousedown() and mousemove(). By chaining mousemove() to the mousedown event, every time the mouse is moved a new event, e, is initialized and the computer draws a line from lastEvent (or the point where the mouse was initially clicked) to the latest point where the mouse has been moved.