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|:whitecheckmark:|:whitecheckmark:| |radiusX|:x:|:whitecheckmark:| |radiusY|:x:|:whitecheckmark:| |rotationAngle|:x:|:question:| |touchType|:question:|:whitecheckmark:| |altitudeAngle|:question:|:whitecheckmark:| |azimuthAngle|:question:|:whitecheckmark:|

To visualize

altitudeAngle

azimuthAngle

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