Code seems ok, but is not drawing.

// select color
var color = $(".selected").css("background-color");
var $controlList = $(".controls ul");

var $newColorButton = $("#revealColorSelect");

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

  // change active class
$(".controls").on("click", "li", function() {
  // deselect
  $(this).siblings().removeClass("selected");

  // add class to clicked element
  $(this).addClass("selected");

  color = $(".selected").css("background-color");
});
  // change color

// open/close new color pop-up
$newColorButton.click(function() {
  changeColor();
  $("#colorSelect").toggle();
});
  // enable slider event
function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();

  $("#newColor").css("background-color", "rgb(" + r + ", " + g +"," + b +")");
}

$("input[type=range]").change(changeColor);
  // fix add color button
$("#addNewColor").click(function() {
  var $newColor = $("<li></li>");
  $newColor.css("background-color", $("#newColor").css("background-color"));
  $controlList.append($newColor);
  $newColor.click();
});

// enable canvas drawing
$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.strokeStyle = color;
    context.stroke();
    lastEvent = e;
  }
}).mouseup(function() {
  mouseDown = false;
});