WebKit TouchEvents - Not accurate?

Question

I'm using the following to capture Touch Events on an Iphone.

document.addEventListener('touchmove', function(event) {              
    event.preventDefault();
    var touch = event.touches[0];
    $('#touchPosition').text("Touch x:" + touch.pageX + ", y:" + touch.pageY);
}, false);

Strangely, I'm finding that the positions are wrong? the farther to the right I move on the iPhones screen (horizontally or vertically positioned, the more prominent the inaccuracies are.

Any ideas here?

Answer 1

This might be because of styling. The canvas.width and canvas.height properties define the size of the drawing area. If you stretch the canvas with css, for example, the coordinates in the canvas will be stretched as well. Therefore, when drawing, the coordinate you pass will be multiplied by the same ratio your canvas has been stretched.