Skip to main content

Quick Start

The fastest way to draw is to create a canvas element and pass it to Canvas.

Quick start canvas

This demo uses the high-level Canvas wrapper with runtime color, size, spacing, eraser, undo, redo, and clear controls.

Loading demo…
<canvas id="paint" style="width: 800px; height: 500px"></canvas>
import { Canvas } from "fuderu";

const painter = new Canvas({
  canvas: "#paint",
  document: {
    width: 800,
    height: 500,
  },
  pressureSimulation: true,
  brush: {
    color: "#111111",
    size: 20,
    spacing: 0.5,
  },
});

Canvas attaches pointer handlers automatically. When the user presses and drags, points are sent to the underlying Brush.

The document option controls the internal drawing resolution. If you omit it, Fuderu derives the internal buffer from the element's CSS size and the current device pixel ratio.

Update The Brush​

Brush settings can be changed at runtime:

painter.loadConfig({
  color: "#ff6b6b",
  size: 32,
  opacity: 0.8,
  flow: 0.9,
});

Eraser Mode​

You can toggle the brush into eraser mode using either loadConfig or the canvas wrapper API.

painter.loadConfig({
  eraser: true,
});

painter.setEraser(true);

Undo, Redo, And Clear​

painter.undo();
painter.redo();
painter.clear();

Resize The Drawing Buffer​

Use resize() when the canvas element's visible size changed and you want the internal drawing buffer to match it:

painter.resize();

Use setDocumentSize() when you want to change the logical artwork size:

painter.setDocumentSize(1536, 1536);

Changing the document size clears the artwork and resets the undo stack.

Clean Up​

When a component unmounts or the drawing surface is removed, detach listeners:

painter.destroy();