Getting relative touch coordinates inside canvas

Question

I've been working on my first HMLT5 game prototype for the past few days, and I need to make it work on both desktop and mobile. The problem is, I'm new on web development in general.

To get the mouse/touch position relative to the canvas I've stoped using e.layerX or e.offsetX and started using this method. I even added <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">.

But even after that, touch coordinates come offset when rotating the screen, and Dolphin also treats touch in a very weird way.

Is there any general way to deal with this? I'm not familiar with the technologies so maybe use jQuery or something similar?

Edit: Also, pageX screenX and clientX all return the same value. No idea why, I used e.touches[0].clientX.

Edit2: I think I solved it. Forgot I had to call findPos(obj); again if the screen rotated. I don't even want to test it without the meta tag, I'll leave it like that for now.

score 3 · Accepted Answer · answered Oct 03 '12 at 15:05

I use this (via JQuery) to get my mouse position in a Canvas, relative to the canvas:

canvas.mousemove(function(e){
    mmouseX = e.pageX-canvas.position().left;
    mmouseY = e.pageY-canvas.position().top;
}

Tried it on Android default browser and it works ok, as well as on Desktops. Never tried it with Dolphin though.

Getting relative touch coordinates inside canvas

1 Answers1