Skip to main content

Image Brushes

Fuderu can use a transparent image or canvas as the brush stamp. Pixels with content become the brush shape, and Fuderu recolors the stamp using the active brush color.

Image brush demo

Load a stamp image and paint with image-based brush shapes directly in the docs.

Loading demo…
No image loaded
await painter.loadImage("/brushes/star.png");

painter.loadConfig({
  color: "#f97316",
  size: 36,
});

With a standalone brush:

await brush.loadImageAsync("/brushes/leaf.png");

Supported Sources​

Brush.loadImage accepts:

  • HTMLImageElement
  • HTMLCanvasElement
  • image URL string

Canvas.loadImage returns a promise and delegates to the underlying brush.

Rotation​

Image brushes are most expressive when paired with rotation:

painter.loadConfig({
  rotation: {
    mode: "flow",
    smoothing: 0.15,
    offset: 0,
  },
});

Available rotation modes:

  • fixed: use rotation.offset as the stamp angle. Omit rotation to use the brush's angle field instead.
  • flow: rotate stamps along the stroke direction.
  • random: choose randomized stamp rotation.

Removing The Image​

painter.brush.removeImage();

After removing the image, the brush returns to the default ellipse stamp.