Brushes

A Brush is a stack of fills and strokes that get composited in order onto a shape. SingleStrokeBrush is a specialized variant used for single stroke paths: it understands path self-intersections and it is even able to blend self intersections with each other.

Any layer, whether a fill or a stroke, can receive an arbitrary number of effects, for instance a vector feather.

import { Brush, Feather } from "redraw";

const brush = new Brush();
brush.addFill("#3FCEBC");
// An arbitrary number of effects can be passed to a stroke or a fill
brush.addStroke("#222", 8, Feather.glow(20));

API

Method	What it does
addFill(color, effects?)	Append a solid fill, gradient, material, or TypeGPU callback.
addStroke(color, width, effects?)	Append a stroke. width is a number, StrokeWidth node, or TypeGPU callback.
addLayer(colorFilters, effects?)	Append a custom color-filter / effect layer.
colorChannelMask = "red" | "green" | "blue" | "alpha"	Restrict this brush to one color channel; useful for chromatic aberration.
blendMode = BlendMode.Multiply	Composite mode (SrcOver default, Multiply, Screen, …).

The effects? argument is one of (or an array of) Feather / StrokeEffect / ColorFilter nodes. See Vector Feathering and Stroke Effects.

A Brush can stack as many fills and strokes as you want; later additions paint on top:

const brush = new Brush();
brush.addStroke(gradient, 10, Feather.blur(30)); // outer glow
brush.addStroke(gradient, 10);                   // sharp body
brush.addStroke("#fff", 3);                      // inner highlight

Three strokes stacked: glow, body, inner highlightOpen in editor →

SingleStrokeBrush

import { SingleStrokeBrush } from "redraw";

const brush = new SingleStrokeBrush();
brush.addStroke(colorFn, strokeWidthFn);

SingleStrokeBrush extends Brush but enforces a single stroke and no fill. It switches the renderer into a specialized mode that handles self-intersections and can blend self-intersaction with one another.

The combination is what makes the calligraphy / neon / hand-drawn examples in the gallery feasible: a single GPU function reading ctx.tan becomes a calligraphy pen.

Self-intersections are nicely blended with each otherOpen in editor →