Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by sonat ugur
sonat ugur
5,725 Points

SimpleDrawingApp

https://teamtreehouse.com/workspaces/9359312

can anyone check this code please. It is working except drawing part. I can not find why it is not drawing maybe it is drawing white and i cannot see, so anyway i couldnt find the problem.

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 li").click(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></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 $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; });

Jake Lundberg
Jake Lundberg
13,965 Points

Your link seems to be broken, can you post your code on here?

sonat ugur
sonat ugur
5,725 Points

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></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 $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(); });

1 Answer

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

Looks like the problem is here...

//On mouse events on the canvas 
$canvas.mousedown(function(e){ 
  lastEvent = e; 
  mouseDown = true; 
}).mousemove(function(e){ 
  //Draw lines 
  if(mouseDown) { 
    context.beginPath(); 
    context.moveTo(lastEvent.offSetX, lastEvent.offSetY);   // <------ HERE!!!!!!!!!!!
    context.lineTo(e.offSetX, e.offSetY);  // <-------- AND HERE!!!!!!!!
    context.strokeStyle = color; 
    context.stroke(); 
    lastEvent = e; 
  }
}).mouseup(function(){ 
  mouseDown = false; 
}).mouseleave(function(){ 
  $canvas.mouseup(); 
});

your 'S' is capitalized in .offset - it should be lowercase.

Hope this helps!