Skip to main content

Brush API

Brush is the lower-level stroke engine. It receives points, interpolates them, renders stamps, and manages image brushes.

The Brush API is part of the stable 1.0.0 surface and is designed for both simple integrations and more advanced custom rendering pipelines. Starting with version 1.1.0, undo/redo history is decoupled from the Brush and managed at the higher-level Canvas wrapper via HistoryManager. This ensures full support for multi-layer operations.

Brush engine controls

Use this demo to compare smoothing, spacing, pressure simulation, blend modes, and canvas filters while drawing.

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

Constructor​

new Brush(canvas?: HTMLCanvasElement, config?: BrushConfig);

If no canvas is provided, call loadContext before drawing.

Properties​

config: BrushBasicConfig;
isSmooth: boolean;
isSpacing: boolean;
isEraser: boolean;
blendMode: CanvasRenderingContext2D["globalCompositeOperation"];
filter: CanvasRenderingContext2D["filter"];
maxUndoRedoStackSize: number;
  • config: active brush settings.
  • isSmooth: enables curve smoothing. Defaults to true.
  • isSpacing: compatibility flag exposed by the brush. Current stamp spacing is controlled by config.spacing.
  • isEraser: enables eraser mode. When true, the brush erases using destination-out compositing.
  • blendMode: composite mode used when mixing the stroke onto the visible canvas.
  • filter: canvas filter used during mix-in.
  • maxUndoRedoStackSize: undo history limit. Defaults to 10; 0 disables history.

Drawing​

putPoint​

putPoint(x: number, y: number, pressure: number): void;

Adds an input point to the stroke queue.

render​

render(): void;

Renders queued points. It is safe to call repeatedly while drawing.

finalizeStroke​

finalizeStroke(callback?: () => void): void;

Ends the current stroke, resets stroke-local state, and commits the stroke. If queued points are still rendering, the optional callback runs after the final queued point is processed.

Configuration​

loadConfig​

loadConfig(config: BrushConfig): void;

Partially updates the active config.

bindConfig​

bindConfig(config: BrushBasicConfig): void;

Replaces the config object reference. This is useful when binding to external state.

Canvas And Image​

loadContext(canvas: HTMLCanvasElement): void;
resize(width: number, height: number): void;
loadImage(
  img: HTMLImageElement | HTMLCanvasElement | string,
  callback?: (isSuc: boolean) => void,
): void;
loadImageAsync(img: HTMLImageElement | HTMLCanvasElement | string): Promise<void>;
removeImage(): void;

resize() changes the target canvas buffer size, recreates internal stroke buffers, and resets undo history.

History And Cleanup​

undo(): void;
redo(): void;
clear(): void;

Note on History: In low-level standalone usage, you can implement custom history tracking. When using the standard Canvas wrapper, the history is fully handled by the global HistoryManager (accessed via canvas.history). These methods remain on the Brush signature for backward compatibility.

Modules​

useModule(module: Module): string;
removeModule(uniqueId: string): boolean;

useModule returns a unique id. Store it if you need to remove the module later. Passing the same module instance again returns its existing id instead of adding it twice.