Input should only possible through Apple Pencil in HTML Canvas JavaScript

Question

I'm trying to make painting on my JavaScript Canvas possible only through the Apple Pencil. Because currently drawing is done by resting the hand in several places, because nciht distinguishes between hand and finger.

I found the following approach from another thread with the SPen where you measure the radius of the touch input, unfortunately it doesn't work for the Apple Pencil on an iPad. Do you have any ideas?

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

Currently I get the position with the following code:

canvas.addEventListener('touchstart', (e) => {});
canvas.addEventListener('touchmove', (e) => {});
canvas.addEventListener('touchend', () => {});

I am grateful for any ideas! Thank you very much!

score 1 · Answer 1 · answered Aug 31 '21 at 11:31

Apple provide a touchType property.

I don't have an Apple pencil to hand, but this snippet is showing me 'direct' when I use my finger which gives me hope that it will show you something else when you use an Apple pencil.

<canvas width=500 height=500 style="background-color: beige;"></canvas>
<script>
var canvas = document.querySelector('canvas');
canvas.addEventListener('touchstart', function(e){
    console.log(e.touches[0].touchType);
});
</script>

Input should only possible through Apple Pencil in HTML Canvas JavaScript

1 Answers1