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!

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 jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 5

Esther Fuldauer
Esther Fuldauer
12,720 Points


Hi, I followed along using Firefox until I got an undefined for lastEvent on line 58 aprox. context.moveTo(lastEvent.offsetX, lastEvent.offsetY); I couldn't figure out what was wrong, so I switched to Chrome and then it worked. Why is this happening? does it have to do with canvas?

2 Answers

Hi Esther,

The offsetX and offsetY properties are still at a working draft stage in the spec, 11 Extensions to the MouseEvent Interface, and currently have an undefined value in firefox.

According to this blog post , http://www.jacklmoore.com/notes/mouse-position/, these 2 properties are implemented inconsistently across browsers.

In particular:

According to the W3C Working Draft, offsetX and offsetY should be relative to the padding edge of the target element. The only browser using this convention is IE. Webkit uses the border edge, Opera uses the content edge, and FireFox does not support the properties.

So this means that if your canvas element has padding and or border applied to it then you will get different results in each browser. The actual drawing that takes place won't necessarily coincide with where the mouse pointer is.

This thread will help with a solution for firefox: https://teamtreehouse.com/forum/this-wont-work-in-firefox-out-of-the-box-i-made-a-change-to-the-mousemove-function-to-make-it-compatible-with-ff

According to the jQuery docs for mousemove:

Fortunately, jQuery normalizes the .pageX and .pageY properties so that they can be used in all browsers.

So perhaps that code can be simplified to only use the pageX and pageY properties for the time being. Basically, the part that works for firefox is also going to work for the other browsers. So rather than have two separate if/else code paths, just use the pageX, pageY code for all browsers because that's more reliable right now.

if(mouseDown) {
    lastEventposX = lastEvent.pageX-$canvas.offset().left;
    lastEventposY = lastEvent.pageY-$canvas.offset().top;
    xpos = e.pageX-$canvas.offset().left;
    ypos = e.pageY-$canvas.offset().top;

    context.moveTo(lastEventposX, lastEventposY);
    context.lineTo(xpos, ypos);
    context.strokeStyle = color;
    lastEvent = e;
Esther Fuldauer
Esther Fuldauer
12,720 Points

Thank you Jason! That was a great explanation. These are good things to know, I wouldn't have figured it out.