Why the canvas pen doesn't show in the browser?

Question

I finished the JQuery canvas project and it works perfectly fine in the workspace. But when I put it in my code editor and open in the browser, it has some issues: 
1) In Firefox, the pen doesn't show up. 
2) In Chrome, the pen becomes a cross but it could draw. 
I checked the Css3 canvas selector can be used in most of the browsers, then what is this problem?

Lijie Zhou · Answer

Hi Sreng, thanks for your reply. Here's my code: 
//Defining the global variables 
var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d"); 
var lastEvent; 
var mouseDown = false; 
//When clicking on control list items
$(".controls").on("click", "li",function(){
 //Deselect sibling elements
       $(this).siblings().removeClass("selected");
//Select clicked element
       $(this).addClass("selected");
//cache current color
       color = $(this).css("background-color");
});
//When "New Color" is pressed
$("#revealColorSelect").click(function(){
//Show color select or hide the color select
    changeColor();
    $("#colorSelect").toggle();
});
//update the new color span
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]").change(changeColor);
//When "Add Color" is pressed
$("#addNewColor").click(function(){
//Append the color to the controls ul
  var $newColor = $("<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
//Draw lines
$canvas.mousedown(function(e){
  lastEvent = e; 
  mouseDown = true;
}).mousemove(function(e){
  //Draw lines
  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(){
  $canvas.mouseup(); 
});

Sreng Hong · Answer

Hi Lijie!!! I've downloaded the project into my computer. It's working fine with Chrome and Safari, but in Firefox the pen show up but I can't draw anything. You can post your code here. I'll help you look through it. Hope this help.

Welcome to the Treehouse Community

Looking to learn something new?

Lijie Zhou

Lijie Zhou

Why the canvas pen doesn't show in the browser?

2 Answers

Sreng Hong

Sreng Hong

Lijie Zhou

Lijie Zhou

Sreng Hong

Sreng Hong