Drawing

A node is a rectangle placed on the canvas. Its drawables sit in its local space, and node.transform maps that space onto the canvas. Canvas accepts the six matrix values in the same order.

All lengths use device pixels. With devicePixelRatio: 2, a CSS length of 20px becomes 40 in the tree.

Replay the steps

tree.steps lists the steps a renderer takes, bottom to top. z-index, negative stacking, and outlines that paint after later siblings are already in order.

import type { Drawable, PaintTree } from "takumi-paint";

declare function draw(ctx: CanvasRenderingContext2D, drawable: Drawable): void;
declare function newLayer(): CanvasRenderingContext2D;

function replay(ctx: CanvasRenderingContext2D, tree: PaintTree) {
  const layers: CanvasRenderingContext2D[] = [];
  let target = ctx;

  for (const step of tree.steps) {
    switch (step.type) {
      case "draw":
        target.setTransform(...step.node.transform);
        for (const drawable of step.drawables) draw(target, drawable);
        break;
      case "begin-clip":
        target.save();
        target.setTransform(...step.node.transform);
        // Clip to step.clip.
        break;
      case "end-clip":
        target.restore();
        break;
      case "begin-group":
        layers.push(target);
        target = newLayer();
        break;
      case "end-group": {
        const parent = layers.pop() ?? ctx;
        // Filter, clip, and mask the layer per step.node.effects, then blend it into parent.
        parent.resetTransform();
        parent.globalAlpha = step.node.effects?.opacity ?? 1;
        parent.drawImage(target.canvas, 0, 0);
        parent.globalAlpha = 1;
        target = parent;
        break;
      }
    }
  }
}

A group needs its own layer. Setting globalAlpha on each draw instead darkens where the group's draws overlap.

Draw a drawable

A shadow or glyphs blur is the Gaussian's standard deviation, half of a CSS blur radius.

Every drawable carries a role, such as background, border, box-shadow, outline, text, or text-decoration. An exporter that rebuilds editable objects can use it to put a box's background, border, and shadow back into one shape.

Read paints

Gradient stops interpolate in sRGB. Takumi adds stops where the CSS interpolation space, such as the default Oklab, would differ. A repeating gradient's stops cover one period with spread: "repeat", as SVG's spreadMethod takes it; canvas gradients only pad, so repeat the stops yourself.

Background and mask layers arrive as pattern paints: one tile drawn at every x and y, clipped to area.

Apply effects

A box with effects composites as a group. Render the group's steps into a layer, run filters over it, clip it to clip, multiply it by the alpha of mask, then blend it with opacity and blendMode.

backdropFilters apply to what is already drawn behind the node, inside backdropClip, before the node draws.