HTML5/Javascript - Is it possible to get the absolute coordinates of a touch event on a Macbook Trackpad in the browser?

Question

I would like to write something in the browser which records gestures on the trackpad.

Since I wanted to be able to track all motion without having to worry about the pointer leaving the window, I first researched this problem and used the MDN Pointer Lock API demo as a starting point.

But I notice when using this demo on a MacBook that if I lift my finger and start a new drag elsewhere on the trackpad, it ignores the distance my finger traveled in the air, it only counts the motion done while my finger is touching the trackpad. This is consistent with the way that the trackpad is used to move the mouse pointer in the operating system in general.

But for my specific application, I want to have the absolute x and y of my finger on the trackpad. Would it be possible to build a variant of the demo linked above where the red dot corresponds to the absolute position of your finger? e.g., if you lifted your finger and then put it down in the upper left, the red dot would always jump to the upper left of the canvas?

I'm aware of the javascript Touch Events API, which gives absolute coordinates when used on a tablet, but the demo does not register any trackpad input when run on the MacBook under Firefox (v36) or Chrome (v41).

I have also read that it's possible to enable touch emulation in Chrome, though I could not find the checkbox to do that under my version (perhaps only special developer builds have this) and from reading about it, it seems like it's more of a mouse-to-touch translation so I'm doubtful that that emulation would have specific support for trackpads.

Is there any way that getting the absolute x,y coordinates of a touch event on a MacBook trackpad is possible via HTML/Javascript?

Answer 1

I really don't believe that you will be able to get the trackpad to work the way that you want it to. Remember, the trackpad is supposed to act as a mouse, it's like a flattened trackball. Think of it as though your finger pushes the cursor around every time you swipe your finger and then centers the cursor under your finger whenever you press onto the trackpad.

Unless you were able to map the trackpad 1:1 to the screen, as is what happens with something like a Wacom tablet, the trackpad has no correlation to the screen; it only knows about the mouse.

In Chrome (version Version 46.0.2490.71 m), you can simulate touch events by enabling it in the emulation mode:

1. Open Dev Tools F12
2. Either click the phone icon in the top-left or open the better console by pressing Esc
3. Click the emulation tab
4. Go to the Sensors panel
5. Check Emulate touch screen