Need help with apple-pencil-safari-api-test?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

shuding
177 Stars 20 Forks 19 Commits 0 Opened issues

Description

Canvas sketch board, force touch, real-time Bezier curve.

Services available

!
?

Need anything else?

Contributors list

# 5,226
TypeScr...
vercel
fetch
Mongoos...
13 commits
# 38,130
CSS
TypeScr...
sqlserv...
Electro...
3 commits
# 228,394
kali-li...
React N...
HTML
Objecti...
1 commit

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.