lastEvent undefined... not drawing?

// no user interaction
// when user interacts cause changes
 var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent; 

// when clicking on list
$(".controls").on("click", "li", function() {
  // deselect sibling elements
  $(this).siblings().removeClass("selected");
  // select clicked item
  $(this).addClass("selected");
  // cache current color
  color = $(this).css("background-color");
});

// when button is pressed
$("#revealColorSelect").click( function() {
  // show color select or hide color select
  changeColor();
  $("#colorSelect").toggle();
});

// update new color span
function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  $("#newColor").css("background-color", "rgb(" + r + ", " + g + ", " + b + ")");
}

//when color sliders change update new color span
$("input[type=range]").on("input", changeColor);

// when add color is pressed
$("#addNewColor").click( function() {
  //append the color to the controls
  var $newcolor = $("<li></li>");
  $newcolor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($newcolor);
  $newcolor.click();
});



// on mouse events on canvas
$canvas.mousedown( function(e) {
  lastEvent = e;
}).mousemove( function(e) {
  context.beginPath();
  context.moveTo(lastEvent.offsetX, lastEvent.offestY);
  context.lineTo(e.offsetX, e.offsetY);
  context.stroke();
});
    //draw lines