animl 0.0.0-stage → 0.1.0

package/modules/canvas/web/renderer.js

@@ -0,0 +1,743 @@
+import { contentBox } from "../../../packages/web/src/content-box.js";
+import { drawOrder, geometryLength, IDENTITY, mul, invert } from "animl";
+const context = (c) => c.getContext("2d");
+const matrix = (m) => new DOMMatrix(m);
+function path(g) {
+  const p = new Path2D(g?.d);
+  if (!g || g.d) return p;
+  if (g.kind === "circle") p.arc(g.cx, g.cy, g.r, 0, Math.PI * 2);
+  else if (g.kind === "rect" || g.kind === "image") {
+    const r = g.rx ?? 0;
+    p.roundRect(g.x, g.y, g.width, g.height, [
+      { x: Math.min(r, g.width / 2), y: Math.min(r, g.height / 2) }
+    ]);
+  }
+  return p;
+}
+class CanvasRenderer {
+  canvas = document.createElement("canvas");
+  #icon;
+  #frame;
+  #sourcePointer;
+  #target = this.canvas;
+  #revision = -1;
+  #viewport = [...IDENTITY];
+  #world = [];
+  #hidden = /* @__PURE__ */ new Set();
+  #reported = /* @__PURE__ */ new Set();
+  #images = /* @__PURE__ */ new Map();
+  #tiles = /* @__PURE__ */ new Map();
+  #pending = /* @__PURE__ */ new Set();
+  #paths = /* @__PURE__ */ new Map();
+  #resize = new ResizeObserver(() => this.layout());
+  #attributes = new MutationObserver(() => this.layout());
+  #resolution;
+  #alive = true;
+  #style;
+  #pool = [];
+  #used = 0;
+  draws = 0;
+  get ready() {
+    return Promise.all(this.#pending);
+  }
+  constructor(icon) {
+    this.#icon = icon;
+    const style = document.createElement("style");
+    style.textContent = ":host{display:inline-block;position:relative;width:1em;height:1em;vertical-align:-.125em;touch-action:manipulation;-webkit-tap-highlight-color:transparent}canvas{position:absolute;pointer-events:none}";
+    this.canvas.setAttribute("aria-hidden", "true");
+    this.canvas.setAttribute("part", "canvas");
+    icon.shadowRoot.replaceChildren(style, this.canvas);
+    this.connect();
+  }
+  connect() {
+    this.#resize.observe(this.#icon);
+    this.#attributes.observe(this.#icon, { attributes: true, attributeFilter: ["pixel-ratio"] });
+    addEventListener("resize", this.#dpr);
+    this.#dpr();
+  }
+  disconnect() {
+    this.#resize.disconnect();
+    this.#attributes.disconnect();
+    removeEventListener("resize", this.#dpr);
+    this.#resolution?.removeEventListener("change", this.#dpr);
+  }
+  destroy() {
+    this.#alive = false;
+    this.disconnect();
+    this.#pool = [];
+    this.#images.clear();
+    this.#tiles.clear();
+    this.#paths.clear();
+    this.#frame = void 0;
+    this.canvas.width = this.canvas.height = 1;
+  }
+  #dpr = () => {
+    this.#resolution?.removeEventListener("change", this.#dpr);
+    this.#resolution = matchMedia(`(resolution: ${devicePixelRatio}dppx)`);
+    this.#resolution.addEventListener("change", this.#dpr);
+    this.layout();
+  };
+  get pixelRatio() {
+    const attr = this.#icon.getAttribute("pixel-ratio");
+    const ratio = attr === null ? devicePixelRatio : Number(attr);
+    if (Number.isFinite(ratio) && ratio > 0) return ratio;
+    this.#diagnostic(
+      "pixel-ratio",
+      "",
+      "bad-pixel-ratio",
+      "use a finite positive pixel-ratio or remove the attribute"
+    );
+    return devicePixelRatio;
+  }
+  layout() {
+    const m = this.#icon.player?.model;
+    if (!m) return;
+    const fitted = this.#icon.constructor.viewBox?.(this.#icon);
+    const [x, y, w, h] = fitted ?? m.viewBox, g = m.grid;
+    const host = contentBox(this.#icon);
+    const fit = fitted ? "fill" : this.#icon.getAttribute("fit");
+    const align = this.#icon.getAttribute("align") ?? "center";
+    const factor = (lo, hi) => align.includes(lo) ? 0 : align.includes(hi) ? 1 : 0.5;
+    const scale = (w >= h ? host.width : host.height) / g;
+    const px = (v, side) => w === h ? side * v / g : v * scale;
+    const cw = fitted ? host.width : fit === "none" ? w : px(w, host.width);
+    const ch = fitted ? host.height : fit === "none" ? h : px(h, host.height);
+    Object.assign(this.canvas.style, {
+      width: cw + "px",
+      height: ch + "px",
+      left: (fitted ? host.left : fit === "none" ? (host.width - w) * factor("left", "right") : px(x, host.width)) + "px",
+      top: (fitted ? host.top : fit === "none" ? (host.height - h) * factor("top", "bottom") : px(y, host.height)) + "px"
+    });
+    const width = Math.max(1, Math.round(cw * this.pixelRatio));
+    const height = Math.max(1, Math.round(ch * this.pixelRatio));
+    let sx = cw / w, sy = ch / h;
+    if (fit !== "fill") sx = sy = (fit === "cover" ? Math.max : Math.min)(sx, sy);
+    const vx = [
+      sx,
+      0,
+      0,
+      sy,
+      (cw - w * sx) * factor("left", "right") - x * sx,
+      (ch - h * sy) * factor("top", "bottom") - y * sy
+    ];
+    const next = [
+      vx[0] * width / cw,
+      0,
+      0,
+      vx[3] * height / ch,
+      vx[4] * width / cw,
+      vx[5] * height / ch
+    ];
+    if (!cw || !ch) return;
+    const changed = width !== this.canvas.width || height !== this.canvas.height || next.some((v, i) => v !== this.#viewport[i]);
+    if (changed) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+      this.#viewport = next;
+      if (this.#frame) this.draw(this.#frame, true);
+    }
+  }
+  point(x, y) {
+    const b = this.canvas.getBoundingClientRect();
+    return new DOMPoint(
+      (x - b.x) * this.canvas.width / b.width,
+      (y - b.y) * this.canvas.height / b.height
+    ).matrixTransform(matrix(this.#viewport).inverse());
+  }
+  /** Map a resolved world node box through this backend's current viewport. */
+  nodeBox([x, y, w, h]) {
+    const r = this.canvas.getBoundingClientRect(), m = this.#viewport, sx = r.width / this.canvas.width, sy = r.height / this.canvas.height;
+    return new DOMRect(
+      r.x + (m[0] * x + m[4]) * sx,
+      r.y + (m[3] * y + m[5]) * sy,
+      w * m[0] * sx,
+      h * m[3] * sy
+    );
+  }
+  #diagnostic(feature, pointer, code = "unsupported-render", hint = "use the SVG renderer or remove this feature") {
+    pointer = this.#sourcePointer ?? pointer;
+    const key = feature + pointer;
+    if (this.#reported.has(key)) return;
+    this.#reported.add(key);
+    this.#icon.dispatchEvent(
+      new CustomEvent("anima:error", {
+        detail: [
+          {
+            code,
+            severity: "error",
+            pointer,
+            message: `Canvas2D cannot render ${feature}`,
+            hint
+          }
+        ]
+      })
+    );
+  }
+  #unsupported(feature, i, key = "") {
+    const resource = this.#frame.tree.resources.find(
+      (r) => r.node === i && r.kind === "surface" && r.key === key
+    );
+    this.#diagnostic(
+      feature,
+      (resource?.pointer ?? "/nodes/" + i) + (resource ? "" : key ? "/" + key : "")
+    );
+  }
+  #surface() {
+    const index = this.#used++;
+    const c = this.#pool[index] ??= document.createElement("canvas");
+    if (c.width !== this.#target.width || c.height !== this.#target.height) {
+      c.width = this.#target.width;
+      c.height = this.#target.height;
+    } else context(c).reset();
+    return c;
+  }
+  #image(src) {
+    let img = this.#images.get(src);
+    if (!img) {
+      img = new Image();
+      img.crossOrigin = "anonymous";
+      img.src = src;
+      this.#images.set(src, img);
+      const pending = img.decode().then(
+        () => {
+          if (this.#alive) this.#icon.invalidate();
+        },
+        () => {
+          if (this.#alive)
+            this.#diagnostic(
+              "image source",
+              "",
+              "asset-load",
+              "check the image URL and CORS headers"
+            );
+        }
+      ).finally(() => this.#pending.delete(pending));
+      this.#pending.add(pending);
+    }
+    return img.complete && img.naturalWidth ? img : void 0;
+  }
+  #color(c) {
+    let value = typeof c === "object" ? this.#style.getPropertyValue("--anima-" + c.slot).trim() || c.fallback : c ?? "#000";
+    if (value === "currentColor") value = this.#style.color;
+    return value;
+  }
+  #path(g) {
+    if (!g) return new Path2D();
+    let p = this.#paths.get(g);
+    if (!p) {
+      p = path(g);
+      this.#paths.set(g, p);
+    }
+    return p;
+  }
+  draw(f, force) {
+    this.#frame = f;
+    if (!force && this.#revision === f.revision) return;
+    this.#revision = f.revision;
+    this.#used = 0;
+    this.#style = getComputedStyle(this.#icon);
+    this.#paths.clear();
+    this.#prepare(f);
+    const ctx = context(this.canvas);
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    ctx.setTransform(...this.#viewport);
+    this.#list(ctx, f.tree.roots, IDENTITY);
+    this.draws++;
+  }
+  #prepare(f) {
+    this.#world = [];
+    const world = (i) => this.#world[i] ??= mul(
+      f.tree.nodes[i].parent < 0 ? IDENTITY : world(f.tree.nodes[i].parent),
+      f.nodes[i].transform
+    );
+    for (let i = 0; i < f.nodes.length; i++) world(i);
+    this.#hidden = new Set(
+      f.nodes.flatMap((n) => n.mask?.sourceDraws === false ? [n.mask.source] : [])
+    );
+  }
+  #source = (f, width, height, pointer) => {
+    const saved = [
+      this.#frame,
+      this.#viewport,
+      this.#world,
+      this.#hidden,
+      this.#target,
+      this.#sourcePointer
+    ];
+    const tile = document.createElement("canvas");
+    tile.width = width;
+    tile.height = height;
+    const [x, y, w, h] = f.viewBox;
+    this.#sourcePointer ??= pointer;
+    this.#frame = f;
+    this.#target = tile;
+    this.#viewport = [width / w, 0, 0, height / h, -x * width / w, -y * height / h];
+    try {
+      this.#prepare(f);
+      const ctx = context(tile);
+      ctx.setTransform(...this.#viewport);
+      this.#list(ctx, f.tree.roots, IDENTITY);
+      return tile;
+    } finally {
+      [this.#frame, this.#viewport, this.#world, this.#hidden, this.#target, this.#sourcePointer] = saved;
+    }
+  };
+  #list(ctx, list, parent, source = false) {
+    const order = drawOrder(this.#frame, list);
+    const isolated = order.some((i) => this.#frame.tree.nodes[i].knockout !== void 0);
+    const layer = isolated ? this.#surface() : void 0;
+    const out = layer ? context(layer) : ctx;
+    if (layer) out.setTransform(ctx.getTransform());
+    for (const i of order) {
+      const entry = this.#frame.tree.nodes[i], n = this.#frame.nodes[i];
+      if (entry.knockout !== void 0 && n.visible) {
+        out.save();
+        out.transform(...n.transform);
+        out.globalCompositeOperation = "destination-out";
+        out.fillStyle = "#000";
+        out.strokeStyle = "#000";
+        out.globalAlpha *= n.opacity;
+        out.lineCap = "round";
+        out.lineJoin = "round";
+        const fill = n.paints.find((p) => p.kind === "fill"), stroke = n.paints.find((p) => p.kind === "stroke");
+        if (fill) out.fill(this.#path(n.geometry), fill.rule);
+        out.lineWidth = (stroke?.width ?? 0) + entry.knockout * 2;
+        if (out.lineWidth > 0 && (fill || stroke)) out.stroke(this.#path(n.geometry));
+        out.restore();
+      }
+      this.#node(out, i, mul(parent, n.transform), source);
+    }
+    if (layer) {
+      ctx.save();
+      ctx.resetTransform();
+      ctx.drawImage(layer, 0, 0);
+      ctx.restore();
+    }
+  }
+  #node(ctx, i, world, source = false, stack = /* @__PURE__ */ new Set()) {
+    const f = this.#frame, n = f.nodes[i], e = f.tree.nodes[i];
+    if (!n.visible || n.opacity === 0 || !source && this.#hidden.has(i) || stack.has(i)) return;
+    stack = new Set(stack).add(i);
+    const isolate = (
+      // seam(P7-2): opacity isolates a painted container together with its children.
+      n.opacity !== 1 && (!n.geometry || e.children.length > 0 || n.paints.filter((p) => p.visible).length > 1) || !!n.mask || !!n.blend && n.blend !== "normal"
+    );
+    const layer = isolate ? this.#surface() : void 0;
+    const out = layer ? context(layer) : ctx;
+    out.save();
+    if (!layer) out.globalAlpha *= n.opacity;
+    out.setTransform(...mul(this.#viewport, world));
+    if (n.clip) {
+      const s = f.nodes[n.clip.source];
+      out.setTransform(...this.#viewport);
+      const clip = new Path2D();
+      clip.addPath(this.#path(s.geometry), matrix(this.#world[n.clip.source]));
+      out.clip(clip, n.clip.rule);
+      out.setTransform(...mul(this.#viewport, world));
+    }
+    const content = (target, basis) => {
+      if (this.#icon.constructor.canvasShapes?.some(
+        (hook) => hook(target, n, (p) => p.type ? this.#gradient(target, p) : this.#color(p.color))
+      ))
+        return;
+      if (n.geometry) this.#shape(target, i, basis);
+      if (e.children.length) this.#list(target, e.children, basis, source);
+    };
+    if (n.patches) {
+      const inv = invert(world);
+      if (inv)
+        for (const patch of n.patches) {
+          if (patch.mode === "hidden") continue;
+          const [sx, sy, sw, sh] = patch.source;
+          const [x, y, w, h] = patch.target;
+          if (!sw || !sh || !w || !h) continue;
+          out.save();
+          out.beginPath();
+          out.rect(x, y, w, h);
+          out.clip();
+          const tw = patch.mode === "repeat" ? sw : w, th = patch.mode === "repeat" ? sh : h;
+          for (let dy = 0; dy < h; dy += th)
+            for (let dx = 0; dx < w; dx += tw) {
+              out.save();
+              out.beginPath();
+              out.rect(x + dx, y + dy, Math.min(tw, w - dx), Math.min(th, h - dy));
+              out.clip();
+              const map = [
+                tw / sw,
+                0,
+                0,
+                th / sh,
+                x + dx - sx * tw / sw,
+                y + dy - sy * th / sh
+              ];
+              const basis = mul(world, map);
+              out.setTransform(...mul(this.#viewport, basis));
+              content(out, basis);
+              out.restore();
+            }
+          out.restore();
+        }
+    } else content(out, world);
+    out.restore();
+    if (layer) {
+      if (n.mask) {
+        const mask = this.#surface(), mc = context(mask);
+        this.#node(mc, n.mask.source, this.#world[n.mask.source], true, stack);
+        if (n.mask.mode.endsWith("luminance")) {
+          const pixels = mc.getImageData(0, 0, mask.width, mask.height);
+          for (let k = 0; k < pixels.data.length; k += 4)
+            pixels.data[k + 3] = pixels.data[k + 3] * (0.2126 * pixels.data[k] + 0.7152 * pixels.data[k + 1] + 0.0722 * pixels.data[k + 2]) / 255;
+          mc.putImageData(pixels, 0, 0);
+        }
+        {
+          out.save();
+          out.resetTransform();
+          out.globalCompositeOperation = n.mask.mode.startsWith("inverted-") ? "destination-out" : "destination-in";
+          out.drawImage(mask, 0, 0);
+          out.restore();
+        }
+      }
+      ctx.save();
+      ctx.resetTransform();
+      ctx.globalAlpha *= n.opacity;
+      ctx.globalCompositeOperation = n.blend !== "additive" && (n.mask || n.clip || n.blend === "normal") ? "source-over" : n.blend === "additive" ? "lighter" : n.blend ?? "source-over";
+      this.#blendImage(ctx, layer, n.blend, n.blendAmount ?? 1);
+      ctx.restore();
+    }
+  }
+  #blendImage(ctx, source, mode, amount) {
+    if (mode === "additive" && amount > 0 && amount < 1) {
+      const w = source.width, h = source.height;
+      const src = context(source).getImageData(0, 0, w, h).data;
+      const dst = ctx.getImageData(0, 0, w, h);
+      for (let i = 0; i < src.length; i += 4) {
+        const sa = src[i + 3] / 255 * ctx.globalAlpha;
+        const da = dst.data[i + 3] / 255;
+        const keep = 1 - sa * (1 - amount);
+        const alpha = Math.min(1, sa + da * keep);
+        for (let k = 0; k < 3; k++)
+          dst.data[i + k] = alpha ? Math.min(255, (src[i + k] * sa + dst.data[i + k] * da * keep) / alpha) : 0;
+        dst.data[i + 3] = alpha * 255;
+      }
+      const result = this.#surface();
+      context(result).putImageData(dst, 0, 0);
+      ctx.save();
+      ctx.globalAlpha = 1;
+      ctx.globalCompositeOperation = "copy";
+      ctx.drawImage(result, 0, 0);
+      ctx.restore();
+    } else {
+      if (mode === "additive") ctx.globalCompositeOperation = amount ? "lighter" : "source-over";
+      ctx.drawImage(source, 0, 0);
+    }
+  }
+  #shape(ctx, i, world) {
+    const n = this.#frame.nodes[i], g = n.geometry, p = this.#path(g);
+    if (g.image) {
+      const image = this.#image(g.image.source);
+      if (!image) return;
+      const r = g.image, w = g.width, h = g.height, iw = r.width ?? image.naturalWidth, ih = r.height ?? image.naturalHeight;
+      if (!w || !h) return;
+      const sx = w / iw, sy = h / ih;
+      const scale = r.fit === "cover" ? Math.max(sx, sy) : r.fit === "none" ? 1 : r.fit === "scale-down" ? Math.min(1, sx, sy) : r.fit === "fit-width" ? sx : r.fit === "fit-height" ? sy : Math.min(sx, sy);
+      const dw = r.fit === "fill" || r.fit === "resize" ? w : iw * scale, dh = r.fit === "fill" || r.fit === "resize" ? h : ih * scale;
+      const factor = (lo, hi) => r.align.includes(lo) ? 0 : r.align.includes(hi) ? 1 : 0.5;
+      ctx.save();
+      ctx.imageSmoothingEnabled = r.sampling !== "nearest";
+      const x = g.x + (w - dw) * factor("left", "right"), y = g.y + (h - dh) * factor("top", "bottom");
+      if (this.#frame.tree.nodes[i].imageWrap) {
+        ctx.beginPath();
+        ctx.rect(g.x, g.y, w, h);
+        ctx.clip();
+        const axes = (mode, pos, size, lo, box) => mode === "clamp" ? [
+          [-1, lo, Math.max(0, pos - lo)],
+          [0, pos, size],
+          [1, pos + size, Math.max(0, lo + box - pos - size)]
+        ] : [[0, lo, box]];
+        const layer = r.wrapX === "clamp" && dw < w || r.wrapY === "clamp" && dh < h ? this.#surface() : void 0;
+        const out = layer ? context(layer) : ctx;
+        if (layer) {
+          out.setTransform(ctx.getTransform());
+          out.globalCompositeOperation = "lighter";
+          out.imageSmoothingEnabled = ctx.imageSmoothingEnabled;
+        }
+        const nw = image.naturalWidth, nh = image.naturalHeight;
+        for (const [cx, dx, cw] of axes(r.wrapX, x, dw, g.x, w))
+          for (const [cy, dy, ch] of axes(r.wrapY, y, dh, g.y, h)) {
+            if (!cw || !ch) continue;
+            const mx = !cx && r.wrapX === "mirror", my = !cy && r.wrapY === "mirror";
+            const px = !cx && r.wrapX === "clamp" ? 1 : 0, py = !cy && r.wrapY === "clamp" ? 1 : 0;
+            const tw = cx ? 1 : nw * (mx ? 2 : 1), th = cy ? 1 : nh * (my ? 2 : 1);
+            const key = JSON.stringify([r.source, cx, cy, mx, my, px, py]);
+            let tile = this.#tiles.get(key);
+            if (!tile) {
+              tile = document.createElement("canvas");
+              tile.width = tw + 2 * px;
+              tile.height = th + 2 * py;
+              const tc = context(tile);
+              tc.imageSmoothingEnabled = false;
+              const slices = (edge, mirror, pad, size) => {
+                if (edge) return [[edge < 0 ? 0 : size - 1, 1, 0, 1]];
+                const list = [[0, size, pad, size]];
+                if (mirror) list.push([0, size, pad + size * 2, -size]);
+                if (pad) list.push([0, 1, 0, 1], [size - 1, 1, pad + size, 1]);
+                return list;
+              };
+              for (const [sx2, sw, dx2, dw2] of slices(cx, mx, px, nw))
+                for (const [sy2, sh, dy2, dh2] of slices(cy, my, py, nh)) {
+                  tc.save();
+                  tc.translate(dx2, dy2);
+                  tc.scale(Math.sign(dw2), Math.sign(dh2));
+                  tc.drawImage(image, sx2, sy2, sw, sh, 0, 0, Math.abs(dw2), Math.abs(dh2));
+                  tc.restore();
+                }
+              this.#tiles.set(key, tile);
+            }
+            const pattern = out.createPattern(tile, "repeat");
+            pattern.setTransform(
+              new DOMMatrix([dw / nw, 0, 0, dh / nh, x - px * dw / nw, y - py * dh / nh])
+            );
+            out.fillStyle = pattern;
+            out.fillRect(dx, dy, cw, ch);
+          }
+        if (layer) {
+          ctx.resetTransform();
+          ctx.drawImage(layer, 0, 0);
+        }
+      } else if (r.sampling === "nearest") {
+        const left = Math.max(g.x, x), top = Math.max(g.y, y);
+        const right = Math.min(g.x + w, x + dw), bottom = Math.min(g.y + h, y + dh);
+        ctx.beginPath();
+        ctx.rect(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+        ctx.clip();
+        const inv = ctx.getTransform().inverse();
+        const px = Math.abs(inv.a) + Math.abs(inv.c), py = Math.abs(inv.b) + Math.abs(inv.d);
+        const iw2 = image.naturalWidth, ih2 = image.naturalHeight;
+        for (const [sx2, sw, dx, width] of [
+          [0, 1, x - px, px],
+          [0, iw2, x, dw],
+          [iw2 - 1, 1, x + dw, px]
+        ])
+          for (const [sy2, sh, dy, height] of [
+            [0, 1, y - py, py],
+            [0, ih2, y, dh],
+            [ih2 - 1, 1, y + dh, py]
+          ])
+            ctx.drawImage(image, sx2, sy2, sw, sh, dx, dy, width, height);
+      } else {
+        ctx.beginPath();
+        ctx.rect(g.x, g.y, w, h);
+        ctx.clip();
+        ctx.drawImage(image, x, y, dw, dh);
+      }
+      ctx.restore();
+      return;
+    }
+    for (const paint of n.paints) {
+      if (!paint.visible) continue;
+      ctx.save();
+      const amount = paint.blendAmount ?? 1;
+      const layer = paint.blend === "additive" && amount < 1 ? this.#surface() : void 0;
+      const out = layer ? context(layer) : ctx;
+      if (layer) out.setTransform(ctx.getTransform());
+      if (paint.blend && !layer)
+        out.globalCompositeOperation = paint.blend === "normal" ? "source-over" : paint.blend === "additive" ? "lighter" : paint.blend;
+      const feather = paint.feather;
+      if (feather?.enabled && (feather.inner || feather.outer || feather.offset.some(Boolean))) {
+        const base = this.#surface(), bc = context(base);
+        bc.setTransform(out.getTransform());
+        this.#paint(bc, i, paint, p, world);
+        this.#feather(out, base, paint, i, world);
+      } else this.#paint(out, i, paint, p, world);
+      if (layer) {
+        ctx.resetTransform();
+        this.#blendImage(ctx, layer, paint.blend, amount);
+      }
+      ctx.restore();
+    }
+  }
+  #feather(ctx, base, paint, i, world) {
+    const r = paint.feather, m = r.space === "world" ? this.#viewport : mul(this.#viewport, world);
+    const sx = Math.hypot(m[0], m[1]), sy = Math.hypot(m[2], m[3]);
+    if (Math.abs(sx - sy) > 1e-5 || Math.abs(m[0] * m[2] + m[1] * m[3]) > 1e-5) {
+      this.#unsupported(
+        r.space === "world" ? "nonuniform viewport feather" : "nonuniform local feather",
+        i,
+        paint.key
+      );
+      return;
+    }
+    const shift = mul(this.#viewport, world);
+    const ox = shift[0] * r.offset[0] + shift[2] * r.offset[1], oy = shift[1] * r.offset[0] + shift[3] * r.offset[1];
+    const sum = this.#surface(), sc = context(sum);
+    for (const part of ["inner", "outer"]) {
+      const c = this.#surface(), cc = context(c);
+      cc.filter = `blur(${r[part] * sx / 3}px)`;
+      cc.drawImage(base, ox, oy);
+      cc.filter = "none";
+      cc.globalCompositeOperation = part === "inner" ? "destination-in" : "destination-out";
+      cc.drawImage(base, 0, 0);
+      sc.globalCompositeOperation = "lighter";
+      sc.drawImage(c, 0, 0);
+    }
+    ctx.save();
+    ctx.resetTransform();
+    ctx.drawImage(sum, 0, 0);
+    ctx.restore();
+  }
+  #gradient(ctx, p) {
+    const c = p.coordinates;
+    const gradient = p.type === "linear" ? ctx.createLinearGradient(c.x1, c.y1, c.x2, c.y2) : p.type === "angular" ? ctx.createConicGradient(Math.atan2(c.y2 - c.y1, c.x2 - c.x1), c.x1, c.y1) : ctx.createRadialGradient(c.fx ?? c.cx, c.fy ?? c.cy, 0, c.cx, c.cy, c.r);
+    for (const stop of p.stops) gradient.addColorStop(stop.position, this.#color(stop.color));
+    return gradient;
+  }
+  #paint(ctx, i, p, local, world) {
+    if (p.geometry) local = this.#path(p.geometry);
+    let style = this.#color(p.color);
+    if (p.type && p.gradientTransform) {
+      const mask = this.#surface(), mc = context(mask), layer = this.#surface(), lc = context(layer);
+      mc.setTransform(ctx.getTransform());
+      this.#paint(
+        mc,
+        i,
+        { ...p, type: void 0, gradientTransform: void 0, blend: void 0, color: "#fff" },
+        local,
+        world
+      );
+      lc.setTransform(ctx.getTransform());
+      lc.transform(...p.gradientTransform);
+      lc.fillStyle = this.#gradient(lc, p);
+      const inv = lc.getTransform().inverse();
+      const corners = [
+        [0, 0],
+        [layer.width, 0],
+        [0, layer.height],
+        [layer.width, layer.height]
+      ].map(([x2, y2]) => new DOMPoint(x2, y2).matrixTransform(inv));
+      const x = Math.min(...corners.map((p2) => p2.x)), y = Math.min(...corners.map((p2) => p2.y));
+      lc.fillRect(
+        x,
+        y,
+        Math.max(...corners.map((p2) => p2.x)) - x,
+        Math.max(...corners.map((p2) => p2.y)) - y
+      );
+      lc.resetTransform();
+      lc.globalCompositeOperation = "destination-in";
+      lc.drawImage(mask, 0, 0);
+      ctx.save();
+      ctx.resetTransform();
+      ctx.drawImage(layer, 0, 0);
+      ctx.restore();
+      return;
+    }
+    if (p.type) style = this.#gradient(ctx, p);
+    if (p.image) {
+      const img = this.#image(p.image.source);
+      if (!img) return;
+      const r = p.image;
+      const tile = document.createElement("canvas");
+      const transform = ctx.getTransform();
+      tile.width = Math.max(
+        1,
+        Math.ceil(r.width * Math.hypot(transform.a, transform.b) * Math.abs(r.scaleX))
+      );
+      tile.height = Math.max(
+        1,
+        Math.ceil(r.height * Math.hypot(transform.c, transform.d) * Math.abs(r.scaleY))
+      );
+      context(tile).drawImage(img, 0, 0, tile.width, tile.height);
+      if (r.modulate) {
+        const tc = context(tile), data = tc.getImageData(0, 0, tile.width, tile.height);
+        for (let k = 0; k < data.data.length; k++)
+          data.data[k] = data.data[k] * r.modulate[k % 4];
+        tc.putImageData(data, 0, 0);
+      }
+      const pattern = ctx.createPattern(tile, "repeat");
+      pattern.setTransform(
+        new DOMMatrix().translate(r.x, r.y).rotate(r.rotate).scale(r.scaleX * r.width / tile.width, r.scaleY * r.height / tile.height)
+      );
+      style = pattern;
+    }
+    for (const hook of this.#icon.constructor.canvasSources ?? []) {
+      const source = hook(
+        p,
+        ctx,
+        (frame, width, height) => this.#source(
+          frame,
+          width,
+          height,
+          (this.#frame.tree.nodes[i].pointer ?? "/nodes/" + i) + "/" + (p.key ?? p.kind) + "/paint"
+        )
+      );
+      if (source) {
+        style = source;
+        break;
+      }
+    }
+    if (!p.color && !p.type && !p.image && typeof style === "string") {
+      this.#unsupported("unregistered paint source", i, "fill/paint");
+      return;
+    }
+    ctx.fillStyle = style;
+    ctx.strokeStyle = style;
+    const rule = p.rule ?? "nonzero";
+    if (p.kind === "fill") {
+      ctx.fill(local, rule);
+      return;
+    }
+    if (!p.width || p.width <= 0) return;
+    ctx.miterLimit = 4;
+    let shape = local;
+    if (p.scale === "fixed") {
+      shape = new Path2D();
+      const ratio = this.pixelRatio;
+      const device = mul(this.#viewport, world).map((v) => v / ratio);
+      shape.addPath(local, matrix(device));
+      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    }
+    ctx.lineWidth = p.width;
+    ctx.lineCap = p.cap;
+    ctx.lineJoin = p.join;
+    ctx.setLineDash(p.dash ?? []);
+    ctx.lineDashOffset = p.dashOffset ?? 0;
+    if (p.trim) {
+      const t = p.trim, fraction = Math.min(1, t.end - t.start);
+      if (fraction <= 0) return;
+      if (fraction < 1) {
+        if (p.scale === "fixed") {
+          this.#unsupported("fixed stroke trim", i, p.key);
+          return;
+        }
+        const len = geometryLength(this.#frame.nodes[i].geometry, this.#frame.tree.nodes[i]), start = ((t.start + t.offset) % 1 + 1) % 1;
+        ctx.setLineDash([fraction * len, (start + fraction > 1 ? 1 - fraction : 2) * len]);
+        ctx.lineDashOffset = -start * len;
+      }
+    }
+    if (p.position && p.position !== "center") {
+      ctx.lineWidth *= 2;
+      if (p.position === "inside") {
+        ctx.clip(shape, rule);
+        ctx.stroke(shape);
+      } else {
+        const layer = this.#surface(), lc = context(layer);
+        lc.setTransform(ctx.getTransform());
+        lc.strokeStyle = ctx.strokeStyle;
+        lc.lineWidth = ctx.lineWidth;
+        lc.lineCap = ctx.lineCap;
+        lc.lineJoin = ctx.lineJoin;
+        lc.miterLimit = ctx.miterLimit;
+        lc.setLineDash(ctx.getLineDash());
+        lc.lineDashOffset = ctx.lineDashOffset;
+        lc.stroke(shape);
+        lc.globalCompositeOperation = "destination-out";
+        lc.fill(shape, rule);
+        ctx.resetTransform();
+        ctx.drawImage(layer, 0, 0);
+      }
+    } else ctx.stroke(shape);
+  }
+}
+export {
+  CanvasRenderer
+};