May I ask why my I can not draw any line in Firefox? but it works in Chrome?

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript">
    //When clicking on control list items
  //Deselect sibiling elements
  //Select clicked element

//When "new color" is pressed
  //show color select or hide the select

//When color sliders change
  //update the new color span


//when "add color" is pressed
  //append the color to the controls ul
  //select the new color

//on mouse events on the canvas
  //draw lines

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

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


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


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]').on('input',changeColor);

$('#addNewColor').click(function(){
  var $addNewColor = $('<li></li>');
  $addNewColor.css('background-color', $('#newColor').css('background-color'));
  $('.controls ul').append($addNewColor);
  $addNewColor.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.strokeStyle = color;
context.stroke();
lastEvent = e;
}
}).mouseup(function(){
mouseDown = false;
});

</script>