HTML5 canvas, palm rejection

Question

We are trying to use html5 canvas with tablet stylus, but we have a problem with palm touching with multitouch tablets. When a person try to draw something and touch the display surface with the palm, lines occurs because of the multitouch.

Do you know how to disable multitouch on tablet through js or canvas option, or do you know if there is a html5 canvas palm rejection techonology.

Tweet

Answer 1

There are some newer web APIs available in current browsers. In particular, the radiusX and radiusY of the touches from a touch event can be used to compute the area of touch. The areas larger than that of a finger, or stylus, could be ignored.

Letreece

Answer 2

The palm rejection feature must be implemented in the browser itself or the operating system on the tablet. In HTML5 and Javascript there is no way of knowing how big the "Finger" is, that touches the canvas.

Palm rejection works fine on tablets that have a dedicated stylus, like the galaxy note series.

As to disabling the Multitouch functionality: There is no way of knowing for the browser, which touchpoint belongs to the stylus and wich one belongs to your palm.

Ildaile

maybe this is a very disappointing answer. but i've been working on this issue myself and the solution we saw as the most efficient was buying a galaxy note pro 12. – Ildaile

We found something which works with galaxy tab stylus S Pen. When touch the screen with S Pen and check the js touch event, we found that radiusX and radiusY are 0, but when you touch it with palm or finger their values are > 0. This can help you – Tweet

But with the s pen you have automatic Palm rejection anyways. So you dont have to implement it with javascript – Ildaile