Tile Map Coordinates

Question

I am have now this code: http://jsfiddle.net/DK67k/2/ In here is 2D tile map and when you click on tile you get coordinates on alert. But for get precises coordinate you need click on top left tile(tiles is 16x16) and if I click on bottom right tile I am get second tile coordinates.

Maybe anyone have idea how to fix this?

Answer 1

You must not rely on absolute mouse coordinates, you have to subtract the canvas offset from it.

var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;