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.

  • How to pass a URI to an intent?
  • how to set NAVIGATION_MODE_LIST on Toolbar new appcompat v7 21
  • Android : Capturing HTTP Requests with non-rooted android device
  • Save ArrayList to SharedPreferences
  • Permission is only granted to system app
  • Custom EditText is not showing keyboard on focus
  • 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.

  • How to add a MOOV atom in a mp4 video file
  • how to get the url of the webView
  • When to use an aidl based service?
  • Fetch unique identifier for a WiFi router
  • change project name and package name
  • AlertDialog inside onClickListener
  • 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.