HTML5 Canvas and Firefox 4 - Getting click coordinates

Question

I've been working on a bunch of HTML5 Video and Canvas demos. Til now I focused on Chrome, but now I'm trying to optimize them for Firefox and Safari as well.

The one I'm working on right now draws a video in Canvas and moves the video to mouseclick positions. What I have so far works in Chrome and Safari, but not in Firefox. I haven't been able to find much info on these topics (click events, coordinates, firefox-specific etc). I copied the code from here:

How do I get the coordinates of a mouse click on a canvas element? http://answers.oreilly.com/topic/1929-how-to-use-the-canvas-and-draw-elements-in-html5/

because they gave me the impression it should work in all browsers, but Firefox still refuses. All it does is display the video, it doesn't react to mouse clicks.

This is my code (not including the definition of variables):

function activateVideo(){
setTarget();
videoElement.play();
animate();
}

function setTarget(){   
targetX=xCoord;
targetY=yCoord
moverX=(targetX-currentX)/100;
moverY=(targetY-currentY)/100;  
}
canvasElement.addEventListener('click', function(){
    /*xCoord = event.clientX - canvasElement.offsetLeft;
    yCoord = event.clientY - canvasElement.offsetTop;
    txtCount.value = xCoord + " + " + yCoord;*/
    if (event.pageX || event.pageY) {
        xCoord = event.pageX;
        yCoord = event.pageY;
    } else {
        xCoord = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        yCoord = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    xCoord -= canvasElement.offsetLeft;
    yCoord -= canvasElement.offsetTop;
    setTarget();
},false);

function animate(){
currentX += moverX;
currentY += moverY;
if(dist(currentX,targetX,currentY,targetY)<1) {
    moverX=0;
    moverY=0;
}
drawVideo(videoElement,context,320,256);
timer = setTimeout(animate,20);
}

function dist(x1,x2,y1,y2){
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}

function drawVideo(videoElement,context,w,h) {
context.clearRect(0,0,1000,600);
context.drawImage(videoElement,currentX,currentY,w,h);
}
playCanvas.addEventListener('click', activateVideo, false);

So obviously I'm a bit lost, if anybody could point me in the right direction, I would appreciate it.

score 1 · Answer 1 · answered Nov 16 '11 at 04:07

I have a working version of this that uses jquery, which is likely the most cross-browser way of doing it. It's not that bad. Here's my fiddle http://jsfiddle.net/jaredwilli/D3PWN/

Code

var canvas = $('canvas');
canvas.mousemove(function(e){
    var pageCrds = '('+ e.pageX +', '+ e.pageY +')',
        clientCrds = '('+ e.clientX +', '+ e.clientY +')';

    $('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);    
    $('span:last').text('(e.clientX, e.clientY) - '+ clientCrds);

});

var arr = [];
canvas.click(function(e) {
    arr.unshift($('span.first').text());
    console.log(arr);
});

Hope this helps you out some. :)

score 0 · Answer 2 · answered Apr 24 '11 at 13:03

0

You need to pass the event object to the handler for FF (IE works becuse event is available via window.event)

canvasElement.addEventListener('click', function(event){
   event = event || window.event;
   ...

answered Apr 24 '11 at 13:03

Alex K.

171,639
30
264
288

Hi Alex, thanks for your reply. Unfortunately adding this line makes no difference for me so far – chuls Apr 25 '11 at 11:54
If a make a page with a canvas and your addEventListener & pass event I can alert(xCoord + "/" + yCoord) ok, problem must be elsewhere? – Alex K. Apr 25 '11 at 12:02
I can't figure it out. I get all the values and functionality fine in the other browsers. But Firefox won't react – chuls Apr 30 '11 at 08:54

HTML5 Canvas and Firefox 4 - Getting click coordinates

2 Answers2