pointerType
—
Demos / Apple Pencil & touch
Apple Pencil & multi-touch
A drawing surface backed by Pointer Events. Pressure changes the stroke weight, tilt skews the brush, and the input type (pen vs touch vs mouse) determines the color.
Waiting for input…
Tap, draw, or use Apple Pencil ✎
pressure
—
tiltX / tiltY
—
altitude / azimuth
—
coalesced
—
How it works
A single pointerdown / pointermove /
pointerup handler does all the work. For each move event
we ask the browser for getCoalescedEvents() — the
higher-frequency samples Safari captured between paints — and we draw
a line between every consecutive pair.
Stroke width is driven by event.pressure (0 if there is
no pressure sensor, otherwise 0–1). Pencil reports its tilt as
tiltX/tiltY, which we convert into the
altitude/azimuth pair the spec also exposes.
On a plain finger touch you'll see pressure: 0.5 as the
spec-defined default and no tilt. On Pencil you'll see real values
changing under your hand.