4

I want to make a little painting program. So i am going over if it's even possible. As with all good painting programs it needs to have pressure sensitivity. And i don't think i have ever come across anyway to get pressure sensitivity of mouse/tablet. Is there a workaround.

The thing i have come closest to is touch event that is supposed to have pressure property.

This question has been asked before but that was like in 2009. I am hoping that there would be something available this time.

Chrome apps are also an option.

Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168

2 Answers2

3

As far as I know only Firefox support this through a proprietary property on the event object:

var pressure = event.mozPressure;

which keeps a value between 0.0 and 1.0.

Wacom has a plugin that can be installed to give browsers an API to read these sort of values from but I guess it only works with their own tablets.

3

Hello from the future world of 2022!

There is a PointerEvent API that appears to be supported by major browsers, and pressure can be read out from the PointerEvent.pressure property.

tldraw is an example of a project using this API.

Notes on operating system support for this:

  • macOS
    • I can confirm pressure-sensitivity with tldraw's drawing tool works for me on macOS, with either Chrome or Firefox, and a cheap Wacom tablet. Safari did not.
  • Linux
    • Chrome on Linux works out of the box; I used the Flatpak version. Your mileage may vary with the .deb or Snap package.
    • For Firefox, you may need to do this or this to get pressure-sensitivity working. There seems to be a regression with Xinput 2 support being tracked by bug #1207700, so maybe this will be fixed some day.
  • Windows
    • I don't imagine you'll have any problems on Windows, but I'm unable to test.

If you were interested in creating a web-based paint program in 2022, you might have a look at Pressure.js, which claims to support both pressure input and "3D Touch" present on some Apple devices in a single library. I have no first-hand experience with this library, though, so I can't back up those claims.

It's true this comes 9 years too late for your project. Sorry about that. But this question ranks high in search results for "pressure sensitivity javascript api," so perhaps it can still be useful to someone.

TheDudeAbides
  • 1,821
  • 1
  • 21
  • 29
  • That link to support.syncsketch.com is broken (_and_ not in the Wayback Machine), but the gist of what was suggested was to set `dom.w3c_pointer_events.dispatch_by_pointer_messages` to `true` in about:config. I can't vouch for this actually _fixing_ anything, though. – TheDudeAbides May 03 '23 at 00:12
  • [This fiddle](https://jsfiddle.net/mr1z7qg3/) ([via](https://stackoverflow.com/a/56301789/785213)) suggests to me that pressure sensitivity in Firefox _does_ work on Linux, just not on tldraw.com. – TheDudeAbides May 03 '23 at 00:20