Web - How to differentiate between finger touch and stylus touch?

Question

I'm trying to make a drawing web app. I'd like to draw with stylus and move the canvas with my hand. How to distinguish between those two?

I haven't found anything promising in the official MDN docs.

Answer 1

You can tell with fairly high confidence if a touch is by finger or stylus by capturing the PointerEvent and checking its width and height properties, which represent the tip size.

A stylus typically has a smaller width and height than a finger.

---

Training an App to Recognize Finger vs. Stylus

Since tip size likely varies between screens, fingers, and styluses, a possible strategy would be to have the user train the app to recognize different types of touches:

"This is a finger" command, followed by several finger touches until the app has a good sample of sizes.

"This is a stylus" command, followed by several stylus touches.

MDN on PointerEvent interface.

Demo that shows stylus (or finger) tip size of every screen touch.

This will display the tip size of a touch or click on the screen:

let counter = 0;
// listen for 'pointerdown' events, detect tip size
window.addEventListener('pointerdown', (evt) => {
  const w = Number(evt.width).toFixed(1);
  const h = Number(evt.height).toFixed(1);
  const div = document.getElementById('result');
  counter++;
  div.innerHTML = `${counter}: stylus width: ${w}, height: ${h}`;
});

body {
  background-color: #eee;
  color: black;
}

#result {
  margin: 0.5rem;
  width: 18rem;
  min-height: 2rem;
  padding: 0.5rem;
  border: 1px solid gray;
  color: green;
}

<h4>Test of Pointer Stylus Tip Size</h4>
<p>Touch or click anywhere...</p>
<div id="result"></div>