Drawing

A renderer reads where each node sits and the order to draw it in.

Place a nodeCopy Anchor Link

Each node has a local space from (0, 0) to (width, height). Its drawables use that space. node.transform maps the space onto the canvas.

Pick a rotation below. The drawables stay the same. Only the transform changes.

node.bounds is the node's bounding rectangle on the canvas, so it grows when the node rotates.

Canvas takes the matrix in the same order: ctx.setTransform(...node.transform).

Replay the stepsCopy Anchor Link

tree.steps lists every step, bottom to top. The demo draws the card from Paint JSX one step at a time.

The order already accounts for z-index, including negative values. An outline that paints after later siblings has its own draw step in the right place.

This loop replays the steps onto a canvas:

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 per draw darkens the spots where draws overlap.

Draw a drawableCopy Anchor Link

A shadow or glyphs blur is a Gaussian standard deviation, half the CSS blur radius. A glyphs drawable with a blur is a text shadow.

Every drawable except group has a role, such as background, border, or text. Exporters use it to rebuild editable objects. For example, a slide writer can merge a box's background, border, and shadow into one shape.

Read paintsCopy Anchor Link

Interpolate gradient stops linearly in sRGB. Takumi adds stops wherever the CSS interpolation color space, Oklab by default, would differ.

A repeating gradient has spread: "repeat". Its stops cover one period, as with SVG's spreadMethod. Canvas gradients only pad, so repeat the stops across the area yourself.

Background and mask layers arrive as pattern paints. A pattern draws one tile at every x and y pair, clipped to area.

Apply effectsCopy Anchor Link

A box with effects composites as a group. Apply them in this order:

1. Render the group's steps into a layer.
2. Run filters over it.
3. Clip it to clip, and multiply it by the alpha of mask.
4. Blend it with opacity and blendMode.

backdropFilters apply to what is already drawn behind the node. They run inside backdropClip, the node's border box, before the node draws.