Reference
Paint options, tree methods, and node, run, and drawable fields.
| API | Result |
|---|
paint(node, options?) | A Promise<PaintTree> using a shared painter |
new Painter() | A painter with its own registered fonts |
painter.paint(node, options?) | A Promise<PaintTree> using that painter |
painter.registerFont(font) | Registers a font before painting |
painter.free() | Releases the painter's WebAssembly memory |
node accepts JSX, an HTML string, or a takumi node tree.
| Option | Type | Effect |
|---|
width, height | number | Canvas size in device pixels; omitted dimensions follow content |
devicePixelRatio | number | Device pixels per CSS pixel; default 1 |
fonts | FontLoader[] | Fonts registered before layout |
images | ImagesInput | Images keyed by the referenced src |
css | CssInput | readonly CssInput[] | Stylesheets applied before layout |
fontFamilies | string[] | Fallback family chain for this call |
lang | string | Default BCP-47 language tag on the root |
| Member | Value |
|---|
width, height | Canvas size in device pixels |
fonts | Every Font the runs use |
root | The root BoxNode |
for (const node of tree) | Every node in document order, produced one at a time |
node(index) | The node listed at index |
Iterator.from(tree) | The same nodes with find, filter, and the other ES2025 iterator helpers, which stop as soon as they have an answer |
paintSteps() | Steps a renderer takes, in paint order |
Every node has these fields.
| Field | Value |
|---|
type | box, text, or image |
element | The input element's id, tagName, className, and child path |
transform | Matrix from local space onto the canvas |
width, height | Size of the local space |
bounds | The node's rectangle on the canvas, after transform |
parent | The enclosing BoxNode |
drawables | What the node draws, in local space |
| Node | Extra fields |
|---|
BoxNode | contentBox, outline, effects, overflowClip, children; iterable |
TextNode | textAlign with start and end resolved, runs in visual order |
ImageNode | image: the decoded src, width, and height |
| Field | Value |
|---|
text | Final text, after text-transform and ellipsis |
element? | The inline element the run came from |
x, y | Baseline start in the text node's local space |
width | Advance |
line | Index of the line, from 0 |
ascent, descent | Typographic distances from the baseline |
font | The Font the run was shaped with |
fontSize, lineHeight, letterSpacing | Used text metrics in device pixels |
glyphs | Glyph IDs and offsets from the baseline start |
outline() | Glyph outlines as SVG path data |
transform? | The text-fit scale, applied before x, y |
Font records family?, weight, style, stretch, variationSettings, and faceIndex. font.data() returns the font file.
| Type | Format |
|---|
Rgba | [r, g, b, a], each byte from 0 to 255, in sRGB |
Matrix | [a, b, c, d, e, f], as setTransform takes it |
Rect | { x, y, width, height } |
CornerRadii | topLeft, topRight, bottomRight, bottomLeft, each an { x, y } radius |
Shape | rect, rounded-rect, or path (SVG path data, as new Path2D() takes it) |
Paint | color, linear-gradient, radial-gradient, conic-gradient, image, pattern |
Stroke | width, dash?, cap, join |
Drawable | fill, stroke, shadow, glyphs, image |
Filter | blur, color-matrix, drop-shadow, unsupported |
Effects | opacity, blendMode, isolation, filters, backdropFilters, clip, mask |
filter: url(#id) arrives as { type: "unsupported", css }.backdrop-filter needs what is already drawn behind the node, which targets such as PPTX cannot read.- A translucent layer inside a box, such as a span's
opacity, is multiplied into each draw, so overlapping draws in it paint darker than the renderer's layer.
- Bitmap glyphs, such as some emoji fonts, are left out of
run.outline().
Last updated on
