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

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.

  • Android application lifecycle clarification
  • Android Studio setup JDK error
  • Google Drive Android API - Sharing files in App folder?
  • New Relic Class Not Found … I don't even use new relic
  • How to connect to the server on mobile application?
  • What's the quickest way to add several views to a LinearLayout?
  • 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.

    Related posts:

    Text with gradient in Android
    How to create Android VectorDrawables from Illustrator (or similar tool)?
    Shared preferences between two processes of the same application
    Get application context from non activity singleton class
    Android SQLiteMisuseException when calling database.rawQuery
    Adding a breakpoint in Eclipse, causes Dalvik to crash
  • Disable keyboard input on Android TimePicker
  • Why my videoview is not playing?
  • Android : Understanding drawable folder
  • How to identify an Android device programmatically?
  • Eclipse - Android Library Update
  • How can I update the editor action button display on the fly?
  • One Solution collect form web for “Can't get coordinates of touchevents in Javascript on Android devices”

    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;
    
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.