Skip to main content

Canvas API

Canvas wraps an HTMLCanvasElement, an underlying Brush, and pointer event handling.

Canvas API behavior

Draw here to see pointer input, pressure simulation, undo, redo, clear, and eraser mode working through the Canvas wrapper.

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

Constructor​

new Canvas(options: CanvasOptions);
interface CanvasOptions {
  canvas: HTMLCanvasElement | string;
  document?: {
    width: number;
    height: number;
  };
  brush?: BrushConfig;
  pressureSimulation?: boolean;
}
  • canvas: a canvas element or a selector that resolves to one.
  • document: optional logical drawing resolution. If omitted, Fuderu uses the element's CSS size multiplied by window.devicePixelRatio.
  • brush: optional initial brush config.
  • pressureSimulation: defaults to true.

Properties​

brush​

brush: Brush;

The underlying brush instance.

mousePressure​

mousePressure: MousePressure;

The pressure simulator used for mouse and touch input.

pressureSimulation​

pressureSimulation: boolean;

Toggles simulated pressure for non-pen input.

documentWidth, documentHeight​

documentWidth: number;
documentHeight: number;

The current logical drawing resolution.

lastPressure​

lastPressure: number;

The most recent pressure value sent to the brush.

Methods​

loadConfig​

loadConfig(config: BrushConfig): void;

Updates the underlying brush config.

loadImage​

loadImage(img: HTMLImageElement | HTMLCanvasElement | string): Promise<void>;

Loads an image brush.

setSmooth​

setSmooth(enabled: boolean): void;

Enables or disables curve smoothing.

setSpacing​

setSpacing(enabled: boolean): void;

Updates the brush's compatibility isSpacing flag. Current stamp spacing is controlled by brush.config.spacing.

setEraser​

setEraser(enabled: boolean): void;

Toggles eraser mode for the current brush.

undo, redo, clear​

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

History and canvas helpers.

resize​

resize(): void;

Resizes the internal drawing buffer to the canvas element's current CSS size multiplied by window.devicePixelRatio, then reloads the brush context. This clears the current artwork and resets undo history.

setDocumentSize​

setDocumentSize(width: number, height: number): void;

Changes the logical drawing resolution. This clears the current artwork and resets undo history. It does not change the canvas element's CSS size.

destroy​

destroy(): void;

Removes pointer event listeners.