what's wrong with my codes

console.log("var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mousedown = false;
// when clicking on controlr list item
$(".controls").on("click", "li", function(){

  // deselect sibling elements
  $(this).siblings().removeClass("selected");
  // select clicked element
  $(this).addClass("selected");
   // cache the color
  color =$(this).css("background-color");
})

// when newcolor is pressed

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

//update the newcolor 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 

 $("input[type=range]").change(changeColor);

// when the addcolor is pressed
 $("#addNewColor").click(function(){

   // append the color to controle ul
   var $newColor = $("<li></li>");
   $(".controls ul").append($newColor);
   $newColor.css("background-color", $("#newColor").css("background-color"));
   // select the new color
   $newColor.click();


 })


// on mouse events on the canvas
 $canvas.mousedown(function(e){
  lastEvent = e;
   mousedown = true;
 }).mousemove(function(e){
   lastEvent = e;
   if(mousedown) {
 context.beginPath();
 context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
 context.lineTo(e.offsetX, e.offsetY);
 context.stroke();
 context.strokeStyle = color;
   lastEvent = e;
   }
}).mouseup(function(){
 mousedown = false;

 }).mouseleave(function(){
  $canvas.mouseup();

 })")