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.

Answer 1

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

Answer 2

The S-Pen should fire an onMouseOver event when it gets close to the screen (depending on browser & S-Pen version), you can take advantage of that by storing a global variable isSPen = false and having a global onMouseOver event setting that variable to true. Try different browsers and see which ones will deliver the event, usually the stock browser always works best.

If that doesn't work, you may need to host your webpage inside an app container; Android has an OnHoverListener that picks up the S-Pen. You can use a full-screen WebView and communicate to it with Android's JavaScript messaging API: Example

Hope I helped you out, good luck