pen/stylus support in web browsers

Question

Are there any web browsers that make pen/stylus specific events (such as pressure) available to the DOM, similar to Microsoft's RealTimeStylus API?

Is there any standard DOM interface for this? If not, are there proprietary extensions that allow this, perhaps using a plugin?

Answer 1

According to the current APIs, you can't retrieve pressure. However, there is a browser plugin from Wacom.

DeviantArt Muro seems to use it.

Answer 2

No browser currently exposes such APIs.

However, depending on the pen/digitizer drivers, the pen events might look to the browser like touch events, which many browsers have implemented. You can test this in Chrome and Firefox (via Firebug) with the monitorEvents function available in their consoles. Simple call:

monitorEvents(document);

In the console, then see if the browser captures the desired event. I tried this with my own Lenovo X200 tablet, but none of the non-standard events from my pen register (they all appear as mouse events).

I don't know of any third-party extensions that allow this, and a Google search doesn't turn up anything useful.

Answer 3

Here is a possible working solution with a polyfill: hand.js.

See this great MSDN article on the hand.js.

I recommend using a library to smooth out paths. I've had good luck implementing something in paper.js when playing with touch on my hp tablet, I can't imagine it would be too hard to make the points adapt to pressure sensitivity.

There is support for it within html5 windows 8 apps. Sadly this API hasn't been exposed to actual browsers AFAIK.

It looks like there is a W3C recommendation in the pipeline that appears to be based on it. It seems like they are working on the recommendation based on the drafts stored in their repo.

See Quickstart: Capturing ink data (HTML) about using it in windows 8 apps.

Answer 4

If the browser implements support for "pointerevent.pressure", then it should be able to support pressure-sensitive input. For tilts and twists, the equivalent features would be "ponterevent.tiltx", "pointerevent.tilty" and "pointerevent.twist".

See for more information.