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
267 Stars 29 Forks 21 Commits 0 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 2,013
nextjs
TypeScr...
vercel
fetch
13 commits
# 37,488
CSS
TypeScr...
sqlserv...
Electro...
3 commits
# 231,117
kali-li...
React N...
HTML
React
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.