Color of stroke not changing

var color = $(".selected").css("background-color");
var context = $("canvas")[0].getContext("2d");
var $canvas = $("canvas");
var lastevent;
var mouseDown = false;
$(".controls").on("click", "li" ,function(){
  // cache current color here
  var color = $(this).css("background-color");
  $(this).siblings().removeClass("selected");
  $(this).addClass("selected");
});

$("#revealColorSelect").click(function(){
  changeColor();
  $("#colorSelect").toggle();

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

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

}

$("#addNewColor").click(function(){
  var $newColor = $("<li></li>");
  $newColor.css("background-color" , $("#newColor").css("background-color"));
  $(".controls ul").append($newColor);
  $newColor.click();
});

$canvas.mousedown(function(e){
  lastevent = e;
  mouseDown = true;
}).mousemove(function(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;
});