Getting relative touch coordinates inside the canvas

Question

I am working on my first prototype of the HMLT5 game in the last few days, and I need to get it to work both on the desktop and on the mobile. The problem is that I'm new to web development in general.

To get the mouse / touch position relative to the canvas, I stopped 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, the touch coordinates shift as the screen rotates, and Dolphin also refers to touching in a very strange way.

Is there a general way to handle this? I am not familiar with technology, so is it possible to use jQuery or something similar?

Edit: In addition, pageX screenX and clientX all return the same value. Not sure why, I used e.touches[0].clientX .

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

Answer 1

I use this (via jQuery) to get the mouse position in the canvas relative to the canvas:

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

Tried it in the default Android browser, and it works fine, as well as on desktop computers. Never tried this with Dolphin.