I am attaching my working file, a painting app using html canvas.
My painting coordinates work if I use event.offsetX / event.offsetY but then I have no touch support. If I try to use hypeGestureXPosition / hypeGestureYPosition the painting only works if the layout is not scaled. I have also tried e.changedTouches[0].clientX / e.changedTouches[0].clientY but it causes the same problem as the hypeGesture route.
Basically, when painting, the paint will be aligned top-left but as the cursor/touch moves further from this point, the paint drifts away.
If anyone is able to look at my file and tell me if there's a workaround that would be greatly appreciated!
Here is a much simpler version of the file, illustrating the problem I am experiencing when trying to allow touch input. If you swap the lines indicated to change from mouse input to touch input, you will see the problem I am encountering with touch only being 'accurate' in the upper-left corner.
Hopefully this might make it easier to debug! Thanks
I am on the phone and can’t look at code or the file. Anyway general hint: Have you considered fetching the scale factor and using it as a divisor on the gesture coordinates? Why are you or is the canvas scaling anyway?