Using Samsung S-Pen in Canvas

Question

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.

Accepted Answer

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

Using Samsung S-Pen in Canvas

Solution

Problem