apple-pencil-safari-api-test
Canvas based sketch board, with force touch and real-time Bezier curves.
Stars
443
Ecosystems:
JavaScript
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.
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
- Touch Events - Level 2, W3C Draft
- The
TouchObject on MDN radiusX- 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