apple-pencil-safari-api-test
apple-pencil-safari-api-test copied to clipboard
Published
20 hours ago •
shuding
shuding
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.
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 | :white_check_mark: | :white_check_mark: |
| radiusX | :x: | :white_check_mark: |
| radiusY | :x: | :white_check_mark: |
| rotationAngle | :x: | :question: |
| touchType | :question: | :white_check_mark: |
| altitudeAngle | :question: | :white_check_mark: |
| azimuthAngle | :question: | :white_check_mark: |
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
shuding