Skip to main content

Standalone Brush

Use Brush directly when your app already owns event handling, input normalization, replay, collaboration, or a custom drawing loop.

Brush properties demo

Toggle smoothing, spacing, blend mode, and filters while drawing with a standalone brush.

Loading demo…
import { Brush } from "fuderu";

const canvas = document.querySelector("canvas")!;

const brush = new Brush(canvas, {
  color: "#111111",
  size: 24,
  spacing: 0.45,
});

Drawing Points​

Call putPoint with x, y, and pressure, then ask the brush to render its queue.

brush.putPoint(x, y, pressure);
brush.render();

When the stroke ends, finalize it:

brush.finalizeStroke();

Finalizing resets stroke-local state and commits the stroke to the undo stack.

Loading A Canvas Later​

You can construct a brush first and load the canvas later:

const brush = new Brush(undefined, {
  color: "#222222",
  size: 16,
});

brush.loadContext(canvas);

Runtime Behavior​

brush.isSmooth = true;
brush.config.spacing = 0.12;
brush.blendMode = "source-over";
brush.filter = "none";
  • isSmooth enables curve smoothing.
  • config.spacing controls spacing-based interpolation. Smaller values place stamps closer together.
  • blendMode maps to CanvasRenderingContext2D.globalCompositeOperation.
  • filter maps to CanvasRenderingContext2D.filter.

isSpacing is still exposed for compatibility, but current spacing behavior is driven by config.spacing.