Firefox?

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.beginPath();
    context.moveTo(lastEventposX, lastEventposY);
    context.lineTo(xpos, ypos);
    context.strokeStyle = color;
    context.stroke();
    lastEvent = e;
}