Freehand Drawing

The drawing tool lets users draw freehand strokes directly on the canvas. Each stroke is converted into a vector path object that can be selected, moved, resized, and deleted like any other object.

Activating Draw Mode

Toggle drawing mode on and off using engine.setDrawingMode(). While drawing mode is active, clicking and dragging on the canvas creates freehand strokes instead of selecting objects.

// Activate drawing mode
engine.setDrawingMode(true);

// Check if drawing mode is active
const isDrawing = engine.isDrawingMode();

// Deactivate drawing mode
engine.setDrawingMode(false);

ℹ️

Keyboard shortcut

Press D to toggle drawing mode from the keyboard. Press V or Escape to switch back to select mode.

Brush Configuration

Customize the brush color, width, and opacity before or during drawing.

// Configure brush properties
engine.updateBrush({
  color: '#ff0000',
  width: 5,
  opacity: 1,
});

// Thin pencil
engine.updateBrush({
  color: '#000000',
  width: 1,
  opacity: 1,
});

// Thick semi-transparent marker
engine.updateBrush({
  color: '#2563eb',
  width: 20,
  opacity: 0.5,
});

Brush Options

Name	Type	Default	Description
`color`	`string`	`'#000000'`	Brush color (hex, rgb, or named)
`width`	`number`	`5`	Brush width in pixels
`opacity`	`number`	`1`	Brush opacity from 0 to 1

Brush Types

Three brush types are available, each producing a different visual effect.

// Pencil brush (default) — smooth freehand line
engine.setBrushType('pencil');

// Spray brush — scattered dots like spray paint
engine.setBrushType('spray');
engine.updateBrush({
  width: 30,        // spray radius
  color: '#ef4444',
});

// Circle brush — stamps circles along the path
engine.setBrushType('circle');
engine.updateBrush({
  width: 15,
  color: '#10b981',
});

Available Brush Types

Name	Type	Default	Description
`pencil`	`BrushType`	—	Smooth freehand line — best for general drawing and writing
`spray`	`BrushType`	—	Scattered dots simulating spray paint — width controls spray radius
`circle`	`BrushType`	—	Stamps circles along the stroke path — width controls circle diameter

Undo Support

Every completed stroke is automatically added to the undo stack. Press Ctrl+Z (or Cmd+Z on macOS) to undo the last stroke. Redo with Ctrl+Shift+Z.

💡

Stroke as object

Once a stroke is completed (mouse/touch released), it becomes a regular canvas object. You can exit drawing mode, select the stroke, and modify its properties (color, opacity, position, scale) just like any other shape.

Complete Example

// Complete drawing workflow
function enableDrawMode(engine) {
  // 1. Set brush type and style
  engine.setBrushType('pencil');
  engine.updateBrush({
    color: '#1a1a1a',
    width: 3,
    opacity: 1,
  });

  // 2. Enter drawing mode
  engine.setDrawingMode(true);

  // User draws on canvas...
  // Each completed stroke becomes a Path object
  // automatically added to the canvas and undo stack
}

function disableDrawMode(engine) {
  engine.setDrawingMode(false);
  // User can now select and manipulate drawn paths
  // like any other object (move, resize, delete)
}

UI: Draw Panel

When the drawing tool is active, the side panel shows the Draw Panel with the following controls:

Brush type selector — visual buttons for pencil, spray, and circle
Size slider — adjust brush width from 1 to 100 pixels
Color picker — choose brush color with recent colors palette
Opacity slider — adjust brush opacity from 0% to 100%