Variables with and without $

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");
var context = $("canvas")[0].getContext("2d");

//When clicking on control li

$(".controls").on("click", "li", function() {
//Deselect siblings
$(this).siblings().removeClass("selected");
//Select clicked
$(this).addClass("selected");

color = $(this).css("background-color");
}); 


//When new color is clicked
$("#revealColorSelect").click(function() {
//show or hide the control panel
changeColor();
//show or hide the control panel 
$("#colorSelect").toggle();

});


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]").on("input", changeColor);
  //update new color span

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

  //On mouse events on the canvas 
var $canvas = $("canvas");  
  //draw lines
context.beginPath();
context.moveTo(10,10);
context.lineTo(80,10);
context.stroke();