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?

Energy

I've been searching for something similar: or even the ability to use tags (or tangible tags, rfIds) that are detected. Did you find anything? – Mathematical

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.

Bertle

Answer 2

The Pointer Events API is a set of events that pointer devices can trigger. The event objects are similar to what you get for mouse events, but they do add properties for attributes like pressure. These events are supported by current releases of all modern browsers.

Giesser

Answer 3

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.

Openhearth

Answer 4

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.

Entrepreneur

I added an answer to give an update on this issue. Lets keep our fingers crossed! – Londalondon

Answer 5

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.

Londalondon

Answer 6

This may not be a very practical suggestion or something a bit overkill, but if there are APIs / SDKs that expose the pen / stylus to the desktop, you could create a webservice type of application that would update a page in real time with the input from the device. I don't however have any code to help you with this, nor do I know if it would be possible to do this without impossible lag.

Rhine

Additionally, you could mix the two approaches: use a webservice to feed your webapp with pressure information, and a supported plugin/library to handle the remaining input. – Intrepid