Hi , can someone help me understand this concept of lastevent and setting it equal to e?

The answer lays, in part, in the jQuery documentation for the .mousedown() method. Though I don't see an example that uses the e parameter, it does mention that "An object containing data…will be passed to the event handler."

$canvas.mousedown(function(e) {
  lastEvent = e;
  ...

e is the event object. By convention it is often named e. It could reasonably be named event. But, being like a variable, it could even be named squirrel. e is just a common choice as shorthand for "event object".

Every event handling function receives an event object (whether you want it to or not — it's automatic). If you have no use for the event object then you could simply leave the parentheses following the function keyword empty:

$canvas.mousedown(function() {
...

At 3:32 in the video you can see Andrew C. display the contents of this MouseEvent object in the JavaScript Console of the Developer Tools. You may note that two of the object's properties are offsetX and offsetY.

There are essentially two event objects at work in the following code:

//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;
  }
...

They are both assigned to e. This works because in the first event,.mousedown(), the contents of e (again, the event object containing offsetX and offsetY properties ) are immediately assigned to the global variable lastEvent. Then, when you move the mouse and trigger the second event, .mousemove(), a new event object is created and assigned to e in this line:

}).mousemove(function(e){

This second event object simply remains as e.

So the line:

context.moveTo(lastEvent.offsetX, lastEvent.offsetY);

is the precise point where the .mousedown() was triggered — where you clicked your mouse.

And the line:

context.lineTo(e.offsetX, e.offsetY);

is the precise point where the .mousemove() was triggered — the spot to where you moved the mouse pointer.

Then, the canvas element does its HTML5 magic and draws connecting lines between those offsets. And it keeps doing it as long as you keep moving the mouse and keep triggering .mousemove(). This creates the shapes you draw on screen.

Clear, n'est-ce pas?