Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

Reading Apple Pencil Pressure in the Browser — PointerEvent, getCoalescedEvents(), and the e.pressure Trap

DEV Community·SEN LLC·23 days ago
#3qrnWsM0
Reading 0:00
15s threshold

Building a sketch pad in a browser sounds like a one-evening job. Then someone tries it with an Apple Pencil and the pressure data is gone , because the code listens for mousemove . Or with a mouse and the line is half as thick as it should be, because it reads e.pressure blindly and a mouse reports 0.5 . Or with a fast hand on an iPad and the line is jagged , because the browser only emits one pointermove per 60 Hz frame and the Apple Pencil samples at 240 Hz. This 300-line page solves all three. 🌐 Demo : https://sen.ltd/portfolio/canvas-notebook/ 📦 GitHub : https://github.com/sen-ltd/canvas-notebook Why drop MouseEvent / TouchEvent entirely The web's input APIs grew in three layers: MouseEvent ( mousedown / mousemove / mouseup ) — mouse only. TouchEvent ( touchstart / touchmove / touchend ) — touch only, multi-finger. PointerEvent ( pointerdown / pointermove / pointerup ) — the unification, plus a stylus story.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More