kidgodzilla / apple-pencil-safari-api-test

Canvas based sketch board, with force touch and real-time Bezier curves.

3D Touch / Force Touch API Demo

A canvas demo featuring:

• Apple Pencil and 3D Touch pressure detection
• smooth Bezier curve drawing

In vanilla JS. Tested in Safari & Google Chrome on iOS 9.3.

Demo | Code.

Help me test on Android/Windows/macOS devices and leave an issue please!

API	Capability (Apple devices with iOS 9)	Capability (Apple devices with iOS 13)
force	✅	✅
radiusX	❌	✅
radiusY	❌	✅
rotationAngle	❌	❓
touchType	❓	✅
altitudeAngle	❓	✅
azimuthAngle	❓	✅

To visualize altitudeAngle and azimuthAngle (source: Apple):

Related Resources

1. Touch Events - Level 2, W3C Draft
2. The Touch Object on MDN
3. radiusX
4. Illustrating the Force, Altitude, and Azimuth Properties of Touch Input

Pointer Events & Polyfills

• Pointer Events on W3C
• Microsoft Edge
• Hand.js -> jQuery PEP.
• MSPointerXXX: MSDN Blog