Awesome Open Source
Awesome Open Source

Screenshot

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):

Apple Pencil

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,686
canvas (364
bezier (33

Find Open Source By Browsing 7,000 Topics Across 59 Categories