I'm attempting to use Pointer Events to detect graphics tablet input including pen pressure, but Chrome and Firefox don't seem to be reading the tablet device (Wa Intuos 4) properly. All pointer events e back with the same pointerId and pointerType as my mouse, with the default pressure reading of 0.5. The code I'm using looks something like this:

container.addEventListener("pointerdown", (event) => {
    console.log(event.pointerId);
    console.log(event.pointerType);
    console.log(event.pressure);
}, true);

This outputs "1", "mouse", and "0.5". This occurs for the "pointerdown", "pointermove", and "pointerup" events.

I've tried this on both Windows and Linux with the appropriate drivers installed, and other applications detect pen pressure (Krita, for instance).

Do Chrome and Firefox not support graphics tablets properly yet, or am I simply doing something wrong?

I'm attempting to use Pointer Events to detect graphics tablet input including pen pressure, but Chrome and Firefox don't seem to be reading the tablet device (Wa Intuos 4) properly. All pointer events e back with the same pointerId and pointerType as my mouse, with the default pressure reading of 0.5. The code I'm using looks something like this:

container.addEventListener("pointerdown", (event) => {
    console.log(event.pointerId);
    console.log(event.pointerType);
    console.log(event.pressure);
}, true);

This outputs "1", "mouse", and "0.5". This occurs for the "pointerdown", "pointermove", and "pointerup" events.

I've tried this on both Windows and Linux with the appropriate drivers installed, and other applications detect pen pressure (Krita, for instance).

Do Chrome and Firefox not support graphics tablets properly yet, or am I simply doing something wrong?

• javascript
• pointer-events
• wa

Share Improve this question Follow asked Aug 18, 2018 at 18:59 coreyschramcoreyschram 19544 silver badges1717 bronze badges 3

• You need to test on a real device. – Observer Commented Aug 21, 2018 at 13:34
• This is not the fault of Chrome and Firebox. Just because wa forces you to use their sdk product. wa./en-cl/enterprise/business-solutions/… – MatrixTXT Commented Aug 22, 2018 at 4:42
• @Observer I am, as I said in my question I'm using an Intuos 4. – coreyschram Commented Aug 22, 2018 at 23:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +100

To answer your question:

Do Chrome and Firefox not support graphics tablets properly yet, or am I simply doing something wrong?

No, you're not doing anything wrong.

Most modern browsers support Pointer Events. I have found that (like everything else browser based) the degree of "support" can vary.

This begs the quesiton, "how do we avoid the browser inpatibility nonsense?" For this particular case, I'd remend Pressure.js.

To see it in action (and test it with your device of choice), check out the Pressure.js examples.

Try using a function like below to determine if the different pointer types are being detected:

targetElement.addEventListener("pointerdown", function(ev) {
   // Call the appropriate pointer type handler
   switch (ev.pointerType) {
     case "mouse": 
       process_pointer_mouse(ev); 
       break;
     case "pen": 
       process_pointer_pen(ev); 
       break;
     case "touch": 
       process_pointer_touch(ev); 
       break;
     default:
       console.log("pointerType " + ev.pointerType + " is Not suported");
   }
 }, false);

Mozilla has lots of documentation on pointer events for mouse, pens, and touch.

https://developer.mozilla/en-US/docs/Web/API/Pointer_events

https://developer.mozilla/en-US/docs/Web/API/PointerEvent/pointerType

You might get better results if you enable/disable Windows Ink and/or add the following CSS for your element.

div {
  touch-action: none;
}