I'd like to get the X, Y coords relative to the canvas (on mouse-move event).

I'm using this:

<canvas id='c' onmousemove="xy(event)" WIDTH=500 HEIGHT=300>

js:

function xy(e)
{
    x = e.offsetX||e.layerX;
    y = e.offsetY||e.layerY;
}

This works well in Chrome but dont in Firefox. If the canvas element is in 0,0 position it works also in Firefox.

Take a look at this:

What can I do to make it working in FF too?

I'd like to get the X, Y coords relative to the canvas (on mouse-move event).

I'm using this:

<canvas id='c' onmousemove="xy(event)" WIDTH=500 HEIGHT=300>

js:

function xy(e)
{
    x = e.offsetX||e.layerX;
    y = e.offsetY||e.layerY;
}

This works well in Chrome but dont in Firefox. If the canvas element is in 0,0 position it works also in Firefox.

Take a look at this: http://jsbin./ozowaz/10

What can I do to make it working in FF too?

• javascript
• html
• firefox
• html5-canvas

Share Improve this question Follow edited Aug 8, 2012 at 14:10 Rene Pot 24.8k77 gold badges7070 silver badges9292 bronze badges asked Aug 8, 2012 at 14:08 user669677user669677 2

• 1 HTML 5, onMouseMove inline and uppercase properties. Such a mess ;) – Bojangles Commented Aug 8, 2012 at 14:10
• My first ment is that you should avoid using HTML attributes to set event handlers. I find much more reliability with pure javascript, maybe even throwing a little bit of jQuery or Prototype.js in there to make it easier. – Ken Bellows Commented Aug 8, 2012 at 14:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

The container must have

position: relative;

style. Don't use that container for styling border, because it means +n px (n= boder size) in coordinates!

thanks to: http://dev.opera./articles/view/html5-canvas-painting/

You could try to pute it:

// ...
var x = e.pageX - canvas.offsetTop;

where canvas is the canvas dom element. That should work in FF.

This worked for me (pure js)

function getX(event, canvas){
     if(event.offsetX){
       return event.offsetX;
     }
     if(event.clientX){
     return event.clientX - canvas.offsetLeft;
     }
    return null;
 }

function getY(event, canvas){
    if(event.offsetY){//chrome and IE
        return event.offsetY;
    }
    if(event.clientY){// FF
        return event.clientY- canvas.offsetTop;
    }
    return null;    
}

@2astalavista I can't ment due to reputation, so i'll put this here, eventhough i'm not supposed to do this:

I tried the accepted answer, but it only solves the problem from other elements positioned left/above the canvas. For me it didn't take the canvas' margin into account. I don't know if i did it correctly though. Also i don't like the idea of a Html sided solution. Somebody changes the Html, forgets the "position: relative;" resulting in a bug that's almost impossible to track down.

I used Nech's solution, but noticed that it doesn't work correctly when i have elements positioned left or above the canvas. It only takes things like the canvas' margin into account.

I worked around with the following code, the Firefox part is still only about 95 - 99% accurate, pared to the Chrome part. But it gets the job done:

function getEventX(event){
    if (event.offsetX) {
        return event.offsetX;
    }
    if (event.clientX) {
        var currentElement = event.currentTarget;
        var offsetLeft = currentElement.offsetLeft;

        while(currentElement.parentElement && currentElement.parentElement.offsetLeft){
            currentElement = currentElement.parentElement;
            offsetLeft += currentElement.offsetLeft;
        }     

        return event.clientX - offsetLeft;
    }
    return null;
};

function getEventY(event){
    if (event.offsetY) {
        return event.offsetY;
    }
    if (event.clientY) {
        var currentElement = event.currentTarget;
        var offsetTop = currentElement.offsetTop;

        while(currentElement.parentElement && currentElement.parentElement.offsetTop){
            currentElement = currentElement.parentElement;
            offsetTop += currentElement.offsetTop;
        }     

        return event.clientY - offsetTop;  
    }
    return null;
};

I also removed the canvas being handed to the function, you can get the canvas with:

event.currentTarget;

Probably better when handling multiple canvases.