Can't get coordinates of touchevents in Javascript on Android devices

Question

I'm testing the HTML5 canvas and using Javascript to draw for touch enabled devices. While I have it working in iOS devices I cannot get it to work on Android. I have narrowed it down to event.pageX not returning the coordinates, but instead either returning 0, or undefined (based on the Browser).

I've tested it on my phone running Cyanogen 7.1 in Opera Mobile and Dolphin browser, and also on a Galaxy Tab 10.1 (Android 3.1) running the standard browser.

I've modified the code to show an alert on a touchstart event displaying the event.pageX, event.layerX and event.clientX coordinates (I'm aware that clientX should only work on iOS).

canvas.addEventListener('touchstart', function(e) { if (readyToDraw){     alert("PageX: "+e.pageX+","+e.pageY+"\n LayerX: "+e.layerX+","+e.layerY+"\n + clientX: "+e.clientX+","+e.clientY);     // prevent the browsers default action!     e.preventDefault();     paint = true;     // Get coordinates     var c = getCoords(e);     addClick(c.x, c.y, false); } }); 

I've got the full drawing working in iOS but can't even get Android to register the coordinates, any ideas?

FINAL EDIT: I solved the issue, see the accepted answer.

Answer 1

FINAL EDIT: Ok I got it working, if anyone finds this and has a similar problem you need to access the touch array within the event, and if just using a single touch (rather than multi touch) take the first item out of the array, as below, or you may need to offset it if that isn't accurate:

var touch = event.touches[0]; var x = touch.pageX; var y = touch.pageY; // or taking offset into consideration var x_2 = touch.pageX - canvas.offsetLeft; var y_2 = touch.pageY - canvas.offsetTop;