Get touch coordinates within transformed object

Question

I have a canvas that users can draw on. I calculate the coordinates where the user wants to draw by subtracting the canvas's position from the touch's position.

This obviously stops working when the canvas is transformed (3d or not).

Any smart approach to handle this?

Answer 1

This is tricky.

To make it work you'd need to map the 2D touch coordinates into the transformed coordinate space. I doubt you can do this without wrapping the canvas drawing into some code that handles this for you, or having a class that you feed the transformations into in parallel.

Another thing that might be interesting is SVG. It handles all the scene management and click events for you. Read more about that here: What is the difference between SVG and HTML5 Canvas?

Look out for HTML5 canvas scene libraries. Especially game kits for JavaScript have such tools.

Answer 2

I think I just found it:

• window.webkitConvertPointFromPageToNode() and
• window.webkitConvertPointFromNodeToPage()