Color does snot change

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately

var $color = $('.selected').css('background-color');
var $bgcolor;
var $button = $('#revealColorSelect');
var context = $('canvas')[0].getContext("2d");
var $canvas = $('canvas');
var lastEvent;
var mouseDown = false;

$('.controls').on( 'click', 'li', function() {
   $(this).siblings().removeClass('selected');
   $(this).addClass('selected');
   color = $(this).css('background-color');
});

$($button).click( function() {
  changeColor();
  $('#colorSelect').toggle(); 
});

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

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

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

$('#addNewColor').click(addColor);

$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;
}).mouseleave(function() {
  mouseDown = false;
});