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 Preparation

Jonah Shi
Jonah Shi
10,140 Points

May I ask why my I can not draw any line in Firefox? but it works in Chrome?

May I ask why my I can not draw any line in Firefox? but it works in Chrome?

Is it safe to assume you're near the end of the project? Posting your code would be very helpful. Also, check the console in Firefox (right click>inspect element>console, I think). Maybe it's logging the issue.

Jonah Shi
Jonah Shi
10,140 Points

Yes, I'm in the end of the project. I just followed the instructor and here is my code:

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript">
    //When clicking on control list items
  //Deselect sibiling elements
  //Select clicked element

//When "new color" is pressed
  //show color select or hide the select

//When color sliders change
  //update the new color span

//when "add color" is pressed
  //append the color to the controls ul
  //select the new color

//on mouse events on the canvas
  //draw lines

var color = $('.selected').css('background-color');
var $canvas = $('canvas');
var context = $canvas[0].getContext('2d');
var lastEvent;
var mouseDown = false;

  color = $(this).css('background-color');


function changeColor(){
  var r = $('#red').val();
  var g = $('#green').val();
  var b = $('#blue').val();
  $('#newColor').css('background-color',"rgb("+ r +","+ g +","+ b +")");

  var $addNewColor = $('<li></li>');
  $addNewColor.css('background-color', $('#newColor').css('background-color'));
  $('.controls ul').append($addNewColor);

  lastEvent = e;
  mouseDown = true;
context.strokeStyle = color;
lastEvent = e;
mouseDown = false;


I fixed your code formatting for you. Please see this thread for how to post code in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum

2 Answers

Hi Jonah,

offsetX and offsetY are currently undefined in firefox so that portion of the code does not work. pageX and pageY are more reliable to use for the time being. offsetX is more convenient but jQuery normalizes pageX and Y across all the browsers so in my opinion it's the more reliable property to use at this moment. When the specification that includes offsetX and Y becomes a standard then I'm sure firefox will get it in there and we can go back to using that.

This post should help you get it working with pageX and Y: 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

I think you can simplify that code though. Instead of having two separate code paths, one for firefox and one for other browsers, just use pageX/Y and drop all the code for offsetX/Y. In other words, the part of the code that works for firefox should also work for the other browsers.

Let me know if you need help doing that.

Jonah Shi
Jonah Shi
10,140 Points

Thank you Jason!!

After several try I fixed it. When I change offsetX(Y) to pageX(Y), it only allows me to draw right-hand side of the canvas. Then I looked the post, add some codes, then it works.

Thank you for your help to solve this problem!

may be -webkit-