console lastEvent is undefined

var color = $(".selected").css("background-color");        //my code wrong...wa ([.red, .blue, .yellow]);


var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent; 



$(".controls").on("click", "li", function(){
  $(this).siblings().removeClass("selected"); //siblings traverses to the left of a line. we dont put the dot for selected because removeClass already does that.
  $(this).addClass("selected");

  // mycode wrong $(this).next
  color = $(this).css("background-color"); // catches the color when we draw lines later.
});

$("#revealColorSelect").click(function(){;   // see button ids get #, div classes get .  ??? 
    changeColor();   // if this is not here it wont work
    $("#colorSelect").toggle();     // toggle effect display or hides all inside the div including sliders. notice div id under button also has #


});

function changeColor(){
  //window.changeColor
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();  
  $("#newColor").css("background-color", "rgb(" + r + ", " + g + ", " + b + ")");  
};  // not sure why the "rgb..' string is there. because .css can get or set values 
//oh i see creates <span id="newColor" style="background-color: rgb(255, 208, 255);">       

$("input[type=range]").change(changeColor);  //css selector that only selects type of range, input is in index.html and has type="range", with select box change will select method


$("#addNewColor").click(function(){
  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("newColor").css("background-color"));
  // mine wrong doesnt work...   $(".canvas").append("#newColor");

  $(".controls ul").append($newColor);

  $newColor.click();
});


//On mouse events on the canvas
   //Draw lines



$canvas.mousedown(function(event){
  lastEvent = event;
});
  context.beginPath();
  context.moveTo(10, 10); 
  context.lineTo(20, 10);  
  context.lineTo(20, 20);
  context.lineTo(10, 20);
  context.closePath(); 
  context.stroke();