Skip to main content

Brush API

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

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;

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.