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 Modure Rares
Modure Rares
Courses Plus Student 9,041 Points

HTML CANVAS I need help pleaseee

Can someone tell me why my offsetX and offsetY isnt working. When i mousedown i dont draw the line where my pionter is.

$canvas.mousedown(function(e){
    mouseDown = true;
    lastEvent = e;
}).mousemove(function(event){  
  if(mouseDown){
      context.beginPath();
      context.moveTo(lastEvent.offsetX , lastEvent.offsetY );
      context.lineTo(event.offsetX, event.offsetY);
      context.stroke();
      lastEvent = event;
  }
}).mouseup(function(){
  mouseDown = false;
});

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Your issue may be in your CSS.

Did you set either dimension of your canvas using the CSS? If you did, that would alter the display size but break the correspondence with the internal grid that generates coordinates.

To keep them in sync, set the dimensions in the HTML or using JavaScript.

Let me know if this resolves your issue. And if not, you may need to share more of the code. Even better, make a snapshot of your workspace and post the link to it here.