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
jose Luis
2,598 Pointsi need to correct my code
Excuse, i don´t known what happening. but when i try to excute this javascript code, debug says : Cannot read property 'offsetX' of undefined.,
i am doing the same as the video tutorial.
$canvas.mousedown(function(e){ lastEvent = e; }).mousemove(function(e){ context.beginPath(); context.moveTo(lastEvent.offsetX, lastEvent.offsetY); context.lineTo(e.offsetX, e.offsetY);
});
Thanls a lot
jose Luis
2,598 Points//Problem: No user interaction causes no change to application //Solution: When user interacts cause changes appropriately var color = $(".selected").css("background-color"); var $canvas = $("canvas"); var context = $canvas[0].getContext("2d"); var lastEvent;
//When clicking on control list items $(".controls").on( "click" , "li", function() { //Deselect sibling elements $(this).siblings().removeClass("selected"); //Select clicked element $(this).addClass("selected"); //cache color = $(this).css("background-color"); } );
//When new color is pressed //Show color select or hide the color select $("#revealColorSelect").click(function(){ changeColor(); $("#colorSelect").toggle(); });
function changeColor() { var r = $("#red").val(); var g = $("#green").val(); var b = $("#blue").val();
$("#newColor").css("background-color", "rgb( "+r+", "+g+", "+b+")"); }
//When color sliders change //update the new color span $("input[type=range]").change(changeColor);
//When add color is pressed $("#addNewColor").click(function(){
var $newColor = $("<li></li>"); $newColor.css("background-color", $("#newColor").css("background-color") ); $(".controls ul").append($newColor); $newColor.click(); }); //Append the color to the controls ul //Select the new color
//On mouse events on the canvas //Draw lines
$canvas.mousedown(function(e){ lastEvent = e; });
$canvas.mousemove(function(e){ context.beginPath(); lastEventposX = lastEvent.pageX -$canvas.offset().left; lastEventposY = lastEvent.pageY -$canvas.offset().top;
//the problem occurs when i try to use the lastEvent var in 'mousemove' context , setting in .mousedown context.
});
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Jose,
Are you using firefox? If so, the offsetX and offsetY properties are undefined in that browser.
You can use the pageX and pageY properties instead.
This thread will help if that's your problem: 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
It should be safe to simplify the if/else blocks down to this:
lastEventposX = lastEvent.pageX-$canvas.offset().left;
lastEventposY = lastEvent.pageY-$canvas.offset().top;
xpos = e.pageX-$canvas.offset().left;
ypos = e.pageY-$canvas.offset().top;
Basically, rather than have two separate code paths, one for firefox, and one for the other browsers, just use the pageX and pageY properties for all browsers. The part that works for firefox will work in the other browsers too.
Let me know if it's something else.
jose Luis
2,598 PointsThanks a lot. A iam going to try and i say you wahat happen. thanks a lot for you answer.
jose Luis
2,598 PointsThanks i am happy. i finally could fix the code.. thansk a lot both for your help!!
Misha Shaposhnikov
8,718 PointsMisha Shaposhnikov
8,718 PointsCould you please post your entire code, so we could get some context. Thank you. =)