Paint tree
Get the boxes, images, and shaped text that takumi would paint.
takumi-paint lays out JSX, HTML, or a takumi node tree. It returns drawing data for Canvas, presentation files, and native drawing APIs.
npm i takumi-paint @takumi-rs/helpersPaint HTML
paint() returns a PaintTree. The tree has a canvas size, a font table, and a root box.
import { } from "takumi-paint";
const = await ('<div id="card" style="width: 240px; padding: 16px">Hello</div>', {
: 320,
});
const = .("card");
if (!) throw new ("Card was not painted");
.(
.,
.,
..(() => .),
);The returned lengths are device pixels. Set devicePixelRatio to scale CSS lengths during layout.
Read the result
| Need | Read |
|---|---|
| Draw boxes in order | Drawing |
| Place text or lay it out again | Text |
| Check options and field types | Reference |
Reuse a painter
paint() uses a shared Painter. A dedicated Painter keeps its registered fonts separate. Release its WebAssembly memory when finished.
import { } from "takumi-paint";
const = new ();
try {
const = await .("<p>Hello</p>", { : 320 });
.(.);
} finally {
.();
}Last updated on