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 jQuery Basics (2014) Creating a Simple Drawing Application Perfect

Posted by John Kay
John Kay
618 Points

THIS WONT WORK IN FIREFOX OUT OF THE BOX. I made a change to the mousemove function to make it compatible with FF.

Take a look: 

.mousemove(function(e){
  if(mouseDown) {
       if(lastEvent.offsetX == undefined){ // this works for Firefox
        lastEventposX = lastEvent.pageX-$canvas.offset().left;
        lastEventposY = lastEvent.pageY-$canvas.offset().top;
      } else {
        lastEventposX = lastEvent.offsetX;
        lastEventposY = lastEvent.offsetY;
      } 

      if(e.offsetX == undefined){ // this works for Firefox
        xpos = e.pageX-$canvas.offset().left;
        ypos = e.pageY-$canvas.offset().top;
      } else {
        xpos = e.offsetX;
        ypos = e.offsetY;
      } 

    context.beginPath();
    context.moveTo(lastEventposX, lastEventposY);
    context.lineTo(xpos, ypos);
    context.strokeStyle = color;
    context.stroke();
    lastEvent = e;
  }
})
Kevin Murphy
Kevin Murphy
24,380 Points
Kevin Murphy
Kevin Murphy
24,380 Points

This worked great for me. Would it be possible to briefly explain why this correction works? I understand setting up a conditional to check for the undefined state but then the syntax goes beyond what I currently understand. Especially perplexing is the hyphen used in the following: pageX-$canvas and pageY-$canvas. Thanks.

Randy Winsinger
Randy Winsinger
14,538 Points
Randy Winsinger
Randy Winsinger
14,538 Points

Basically you are subtracting the top left coordinates of canvas on the page ($canvas.offset().left, $canvas.offset().top) from the coordinates of the mouse on page (lastEvent.pageX, lastEvent.pageY) to get the coordinates relative to the canvas.

Brian Boling
Brian Boling
7,799 Points

I noticed in the FF console that I wasn't getting an offsetX or offsetY value, but was at a loss how to correct for this...thank you for the help!

2 Answers

Michael Covington
Michael Covington
15,290 Points
Michael Covington
Michael Covington
15,290 Points

Thanks. This really helped.

When I incorporated it in mine, I used the variable isFirefox instead of testing for undefined.

    var isFirefox = navigator.userAgent.indexOf("Firefox") != -1 ? true : false;
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

You don't need the ? true : false as the result of navigator.userAgent.indexOf("Firefox") != -1 would be true or false.