My coords are NaN, NaN

Question

I am trying to get the coords of my mouse position on a canvas. but all i get back is NaN, NaN

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');

var mouseX;
var mouseY;

canvasBg.addEventListener('mousemove', mouseMoved, false);
canvasBg.addEventListener('click', mouseClicked, false);

function mouseMoved(e) {

mouseX = e.pageX - canvasBg.pageOffsetLeft;
mouseY = e.pageY - canvasBg.pageOffsetTop;
document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;

}

function mouseClicked(e) {

    alert( mouseX + "," + mouseY);

}

score 0 · Accepted Answer · answered Mar 21 '14 at 00:05

0

You can do this way simpler:

function mouseMoved(e) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
    document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}

function mouseClicked(e) {
    alert( e.offsetX + "," + e.offsetY);
}

answered Mar 21 '14 at 00:05

chopper

6,649
7
36
53

To answer why your original code doesn't work, pageOffsetLeft and pageOffsetTop don't exist. When you try to subtract undefined from a number, you get (appropriately) not a number. – Joel Spadin Mar 21 '14 at 00:09

score 0 · Answer 2 · answered Mar 21 '14 at 01:49

Here's another solution!

Try this for your mouseMoved function:

function mouseMoved(e) {
    mouseX = e.x - canvasBg.offsetLeft;
    mouseY = e.y - canvasBg.offsetTop;

    document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}

Live preview of full code: Fiddle.

Reference

My coords are NaN, NaN

2 Answers2