Touch Events "touchstart" Returns Incorrect Position On Mobile Safari. Workarounds?

I am developing an HTML5 Canvas project and while adding multitouch support for mobile devices, I seem to have run into an issue on Mobile Safari in iOS 7.1. The main way that use

Solution 1:

I'm not sure if it's obvious, but it was a fun issue to debug. So basically, the confusion comes down to this guy:

functionmouseMoved(evt) {
    var pos = getMousePos(evt);
    inputMoved(pos);
}

For your mouse events, everything works great, because you're bound to mousemove.

c.addEventListener('mousemove', mouseMoved, false);

Which calls

functionmouseMoved(evt) {
    var pos = getMousePos(evt);
    inputMoved(pos);
}

So, as you move your mouse around, your posX/posY values are updated continuously. (Hopefully you see the issue now :)

For TouchEvents, when a user touches (but does not move), you only trigger touchstart and touchend. It isn't until a user drags, that touchmove gets called, which in turn calls the function touchMoved (that calls inputMoved - which updates your posX/posY values).

The easiest way to address this issue on your page is just to call inputMoved in both touchstart and touchmove so your MassHaver instance has the latest state.