Drawing and erasing

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Choose Draw, pick a stroke style and drag on empty canvas. Draw clears the selection so style choices configure future strokes. Choose Select, select one or more completed drawings, then change their style. The stored points and width samples remain unchanged; Undo restores the previous appearance.

The Properties inspector provides three drawing presets:

Preset	Stroke behavior
Pen	Smoothed contour, pronounced pressure variation, round caps.
Brush	The same pressure variation as Pen, with tapered ends.
Marker	Constant width and round caps, independent of pressure.

Presets share the same captured contour and pressure samples. Changing a preset does not discard pressure, so switching from Marker back to Brush restores its variation. Brush tapers use fixed distances relative to stroke width. The inspector exposes color and width alongside the preset, without advanced tuning.

New drawings start at 6 pixels. Mouse input simulates pressure by speed: slow movement thickens Pen and Brush, while fast movement thins them. Styluses use their reported pressure. Both presets capture a 30–170% width range; Brush adds tapered ends. Marker ignores those width samples when painting. While Draw is active, editing a selected drawing's appearance also sets the next stroke's appearance. Editing in Select mode changes only the selection.

session.setShapeCreationStyle(
  Shapes.freehand,
  session.shapeCreationStyle(Shapes.freehand).copyWith(
    inkPreset: InkPreset.brush,
    strokeWidth: 8,
  ),
);

Choose Eraser and drag across a drawing. Undo restores the erased element and its original geometry. Reset restores the sample and clears history. The tool buttons use the standard registered draw, select and eraser tools.

API	Purpose
setActiveTool(DiagramTools.draw)	Activate the registered freehand gesture behavior.
setActiveTool(DiagramTools.eraser)	Activate the registered eraser behavior.
shapeCreationStyle(Shapes.freehand)	Read the current defaults for future strokes.
setShapeCreationStyle(type, style)	Change creation defaults without rewriting existing elements or adding document history.
setShapeStyle(id, style)	Change a completed drawing through registry admission and undo.
setShapeStyles(stylesById)	Restyle multiple drawings atomically with one undo entry.

The style buttons apply to the entire selection of drawings. Mixed selections containing other element types report an error; they do not perform partial edits. Solid, dashed and dotted styles are shown. The sample has explicit variable-width geometry; live strokes use the framework's pressure/speed sampling rules.

Source: apps/demo/lib/examples/basics/freehand.dart. The regression draws and erases with pointer gestures and checks undo restoration; a separate case verifies defaults and completed-stroke style ownership. This does not certify physical stylus pressure, browser latency or every pointer device.