[FIXED] Using Samsung S-Pen in Canvas

Issue

I am working on a web application where the user should be abled to sign a document on a tablet. We use the Galaxy Tab 12.2 because the S-Pen has the desired precision. The canvas where i draw on uses listens to the touch events to draw on the canvas.

        canvas.addEventListener('touchstart', handleStart);
        canvas.addEventListener('touchmove' , handleMove);

The problem here is, that if the user touches the canvas with his fingers, the canvas will draw lines there.

Is there a way to differentiate between S-Pen events and 'normal' touch events?

I know that on the Surface Pro 3 with Internet Expoler I can handle Pen input different from finger input.

Solution

Ok so i found a solution myself that is working pretty well. The SPen fires an ontouch event with radiusX and radiusY = 0.

The events that are triggered with a finger always have a radius > 0. So all that was to do is add

if(e.targetTouches[0].radiusX === 0)

into the event handlers to draw on my canvas.

Check out this Jsfiddle

Answered By - chillichief
Answer Checked By - Marie Seifert (JavaFixing Admin)