How do I paint 2 strokes one over the other?

//No user interaction causes no change to application
//When the user is interactin cause a change to occur

//Even though the class selected doesn't have a bg color,it also has a class of color with it with a background with it (DO NOT GET CONFUSED)
var color=$(".selected").css("background-color");
var $canvas=$("canvas");
var context=$canvas[0].getContext("2d");
var lastEvent;
var mouseDown=true;


$("#newColor").css("background-color", "black");

$(".controls").on("click", "li", function(){
  //Deselect selcted elements
  $(this).siblings().removeClass("selected");

  //Select the clicked on element
  $(this).addClass("selected");

  //Change the color after ranges


  //This sets the color to the neccesary color chosen
  var color=$(this).css("background-color");
});

$("#revealColorSelect").click(function(){

  /*if ( $("#colorSelect").css('display') == 'none' ){

    //If element is hidden
    $("#colorSelect").show();
    // element is hidden
}
  else{
    $("#colorSelect").hide();
  }*/   
  changeColor();
  $("#colorSelect").toggle();

}); 

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

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

//I need to append an li element with the color in the background of #newcolor
  //It also takes the same properties as the classes red blue and yellow

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

drawCanvas();
//drawGreen();

function drawCanvas(){$canvas.mousedown(function(e){
  color=$(".selected").css("background-color");
  lastEvent=e;
  mouseDown=true;
}).mousemove(function(e){
  if(mouseDown){
    context.beginPath();
    context.moveTo(lastEvent.offsetX,lastEvent.offsetY);
    context.lineWidth=10;
    context.lineTo(e.offsetX, e.offsetY);

    context.strokeStyle=color;
    context.stroke();

    lastEvent=e;
  }
}).mouseup(function(){
    mouseDown=false;
}).mouseleave(function(){
    $canvas.mouseup();
});
               }

function drawGreen(){$canvas.mousedown(function(e){
  color=green;
  lastEvent=e;
  mouseDown=true;
}).mousemove(function(e){
  if(mouseDown){
    context.beginPath();
    context.moveTo(lastEvent.offsetX,lastEvent.offsetY);
    context.lineWidth=2;
    context.lineTo(e.offsetX, e.offsetY);

    context.strokeStyle=color;
    context.stroke();

    lastEvent=e;
  }
}).mouseup(function(){
    mouseDown=false;
}).mouseleave(function(){
    $canvas.mouseup();
});
               }