Apple Pencil Safari Api Test Save

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

Project README

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

Apple Pencil

  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

Open Source Agenda is not affiliated with "Apple Pencil Safari Api Test" Project. README Source: shuding/apple-pencil-safari-api-test

Open Source Agenda Badge

Open Source Agenda Rating