Sketch Pad

How it works

Stroke width scales with the Pointer Event's pressure value, which the spec fixes at exactly 0.5 for a mouse or any device without real pressure sensing and reports as a genuine 0-to-1 value from a stylus or tablet — so pressure sensitivity naturally does nothing extra on a mouse but responds properly to a pen. Each of the four brushes is just a different width multiplier and opacity applied to the same stroke code, and the eraser paints opaque white rather than clearing pixels to transparency, since the canvas has an opaque white background to begin with. Undo and redo work by snapshotting the whole canvas as a PNG data URL after every stroke, capped at 30 states so memory use stays bounded.

FAQ

Does the pressure sensitivity actually work with a mouse?

Not really — a mouse always reports a pressure of exactly 0.5 per the Pointer Events spec, so strokes stay a consistent medium width; the pressure-based width variation only shows up with a real stylus or graphics tablet that reports actual pressure values.

Why does the eraser leave a white mark instead of a transparent hole?

The eraser paints opaque white rather than using alpha-based erasure, because the canvas itself has an opaque white background, not a transparent one — painting white matches what people expect from 'erasing to blank paper' instead of leaving a see-through gap.