What is function(e)

Hi Robert First, thanks for your answer and it is very detailed. Appreciate your patience. Can you provide any link of reference for the "e"? So I can check it out on my own. If lastEvent and e are the same thing, why use this: context.moveTo(lastEvent.offsetX,lastEvent.offsetY); context.lineTo(e.offsetX,e.offsetY);

Thank you!

Hi Zoe,

The logic is the following:

When you press down you mouse button you set the mouseDown to true and save in the global variable lastEvent the click event. This event contains, among other, the X and Y coordinates of your click - You need these in order for the script to know where to start drawing.

When you move you mouse, and keep in mind the button is still pressed, the mousemove will be called continuously but will also be passed the current event, which again, contains among others the new coordinates of your mouse cursor. Now using the previous coordinates ( lastEvent.offsetX and lastEvent.offsetY ) and the new coordinates of your mouse ( e.offsetX and e.offsetY ) you are able to draw a line between these coordinates.

At the end of the mousemove function you update the lastEvent variable to the current event e so next time you move your mouse the lastEvent will contain the last coordinates for your cursor and e will contain the new coordinates. Pixel by pixel you draw lines / points this way.

Please keep in mind that lastEvent and e are not the same until the mousemove function completes its code.

To demonstrate this better consider the following:

Lets say when you first press your mouse button, the cursor is at an imaginary X = 0, Y = 0. These coordinates are part of the event object and get stored into lastEvent.

Now, you move your mouse 1 pixel away. The new coordinates are X = 1, Y = 1. The script calls mousemove and passes these new coordinates inside the e variable. Because lastEvent is a global variable it is accessible inside the mousemove function and it contains the old coordinates. The script is instructed to draw a line ( in this case 1 pixel ) between the old coordinates ( 0, 0 ) and the new coordinates ( 1, 1 ). Last, before finishing the function, you update the lastEvent with the current event e. So now in lastEvent you have X = 1, Y = 1.

Moving your mouse again will call the mousemove again with the new coordinates, and so on...

Hope I made things clear :)

Hi Robert Thanks for your explanation. I understand most of it except how the lastEvent works. How can it detect the last move is the last event? Isn't it just a variable which is named randomly by the teacher?

Hi Zoe Xiao,

It is true that lastEvent could be called anything however we're just calling it something sensible. We could've called it previousEvent. To draw we need the previous co-ordinates and the new co-ordinates.

lastEvent is used as a variable to store the last event that took place. When you first click a click event is stored.

lastEvent = <click event>

Then when the mouse moves 1 pixel we compare the last event and the move event and we draw a line from lastEvent to mouse move event. Then lastEvent becomes the move event.

//draw line from lastEvent to e <move event 1>
//<draw code here>
//store current event e as lastEvent
lastEvent = <move event 1>

The mouse continues to move and draw a line from the previous event.

//draw line from lastEvent to e <move event 2>
//<draw code here>
//store current event e as lastEvent
lastEvent = <move event 2>

And so on...

You asked what e is. e is the event that is passed in from any event that's been triggered. A click, a mouse down, a mouse up, a double click etc You could name it anything. Most people name it e.

Here's some more info on it - http://api.jquery.com/Types/#Event