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.

PointerEvent carries the type discriminator ( e.pointerType ∈ "mouse" / "touch" /…