@effing/canvas 0.23.0 → 0.23.2

package/dist/index.js

@@ -3,7 +3,7 @@ import { createCanvas as _createCanvas } from "@napi-rs/canvas";
 import {
   Canvas,
   GlobalFonts as GlobalFonts2,
-  loadImage as loadImage5,
+  loadImage as loadImage3,
   Image
 } from "@napi-rs/canvas";
 
@@ -20,8 +20,17 @@ function renderLottieFrame(ctx, animation, frame) {
   animation.render(ctx);
 }
 
-// src/jsx/draw/index.ts
-import { loadImage as loadImage3 } from "@napi-rs/canvas";
+// src/jsx/image-cache.ts
+import { loadImage } from "@napi-rs/canvas";
+function cachedLoadImage(cache, src) {
+  if (Buffer.isBuffer(src)) return loadImage(src);
+  let entry = cache.get(src);
+  if (!entry) {
+    entry = loadImage(src);
+    cache.set(src, entry);
+  }
+  return entry;
+}
 
 // src/jsx/style/compute.ts
 var ROOT_FONT_SIZE = 16;
@@ -627,6 +636,8 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
   const segments = [];
   let totalHeight = 0;
   let maxLineWidth = 0;
+  const isAutoLineHeight = style.lineHeight === void 0 || style.lineHeight === "normal";
+  let lastMetrics;
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const lineWidth = measure(line);
@@ -644,14 +655,16 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       fontStyle,
       ctx
     );
-    let baselineY;
-    if (fontMetrics) {
-      const typoAscent = fontMetrics.sTypoAscender / fontMetrics.unitsPerEm * fontSize;
-      const typoDescent = -fontMetrics.sTypoDescender / fontMetrics.unitsPerEm * fontSize;
-      baselineY = totalHeight + (lineHeightPx + typoAscent - typoDescent) / 2;
-    } else {
-      baselineY = totalHeight + (lineHeightPx + metrics.ascent - metrics.descent) / 2;
-    }
+    lastMetrics = metrics;
+    const contentHeight = metrics.ascent + metrics.descent;
+    let effectiveAscent = metrics.ascent;
+    let effectiveDescent = metrics.descent;
+    if (isAutoLineHeight && contentHeight > lineHeightPx) {
+      const scale = lineHeightPx / contentHeight;
+      effectiveAscent = metrics.ascent * scale;
+      effectiveDescent = metrics.descent * scale;
+    }
+    const baselineY = totalHeight + (lineHeightPx + effectiveAscent - effectiveDescent) / 2;
     segments.push({
       text: line,
       x,
@@ -673,6 +686,14 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     totalHeight += lineHeightPx;
     maxLineWidth = Math.max(maxLineWidth, lineWidth);
   }
+  if (isAutoLineHeight && lastMetrics && segments.length > 0) {
+    const lastSeg = segments[segments.length - 1];
+    const descentOverflow = lastSeg.y + lastMetrics.descent - totalHeight;
+    if (descentOverflow > 0) {
+      totalHeight += descentOverflow;
+    }
+    totalHeight = Math.ceil(totalHeight);
+  }
   const textBoxTrim = style.textBoxTrim;
   if (textBoxTrim && textBoxTrim !== "none" && segments.length > 0) {
     const textBoxEdge = style.textBoxEdge ?? "text";
@@ -1004,9 +1025,6 @@ function splitGradientArgs(content) {
   return parts;
 }
 
-// src/jsx/draw/image.ts
-import { loadImage } from "@napi-rs/canvas";
-
 // src/jsx/draw/object-fit.ts
 function computeCover(imgW, imgH, boxX, boxY, boxW, boxH) {
   const imgRatio = imgW / imgH;
@@ -1042,8 +1060,8 @@ function computeContain(imgW, imgH, boxX, boxY, boxW, boxH) {
 }
 
 // src/jsx/draw/image.ts
-async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
-  const image = preloadedImage ?? await loadImage(src);
+async function drawImage(ctx, src, x, y, width, height, imageCache, style) {
+  const image = await cachedLoadImage(imageCache, src);
   const objectFit = style?.objectFit ?? "fill";
   if (objectFit === "fill") {
     ctx.drawImage(image, x, y, width, height);
@@ -1359,9 +1377,7 @@ function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
   ctx.restore();
 }
 
-// src/jsx/draw/svg.ts
-import { Path2D } from "@napi-rs/canvas";
-import parseCssColor from "parse-css-color";
+// src/jsx/draw/svg/style.ts
 function resolveCurrentColor(value, color) {
   if (value?.toLowerCase() === "currentcolor") return color;
   return value;
@@ -1371,6 +1387,37 @@ function mergeStyleIntoProps(props) {
   if (!style) return props;
   return { ...props, ...style };
 }
+function svgLength(value, reference, fallback = 0) {
+  if (value == null) return fallback;
+  const s = String(value);
+  if (s.endsWith("%")) return parseFloat(s) / 100 * reference;
+  const n = Number(s);
+  return isNaN(n) ? fallback : n;
+}
+function parseUrlRef(value) {
+  if (typeof value !== "string") return void 0;
+  const m = value.match(/^url\(#(.+)\)$/);
+  return m?.[1];
+}
+function resolveInheritedStyle(merged, color, parent) {
+  return {
+    fill: resolveCurrentColor(merged.fill, color) ?? parent?.fill ?? "black",
+    stroke: resolveCurrentColor(merged.stroke, color) ?? parent?.stroke,
+    strokeWidth: merged.strokeWidth ?? merged["stroke-width"] ?? parent?.strokeWidth,
+    strokeLinecap: merged.strokeLinecap ?? merged["stroke-linecap"] ?? parent?.strokeLinecap,
+    strokeLinejoin: merged.strokeLinejoin ?? merged["stroke-linejoin"] ?? parent?.strokeLinejoin,
+    strokeOpacity: merged.strokeOpacity ?? merged["stroke-opacity"] ?? parent?.strokeOpacity
+  };
+}
+
+// src/jsx/draw/svg/tree.ts
+function normalizeChildren(node) {
+  const raw = node.children ?? node.props.children;
+  if (raw == null) return [];
+  return Array.isArray(raw) ? raw : [raw];
+}
+
+// src/jsx/draw/svg/defs.ts
 function collectDefs(children) {
   const clips = /* @__PURE__ */ new Map();
   const gradients = /* @__PURE__ */ new Map();
@@ -1394,122 +1441,85 @@ function collectDefs(children) {
   }
   return { clips, gradients, masks, filters };
 }
-function parseUrlRef(value) {
-  if (typeof value !== "string") return void 0;
-  const m = value.match(/^url\(#(.+)\)$/);
-  return m?.[1];
-}
-function normalizeChildren(node) {
-  const raw = node.children ?? node.props.children;
-  if (raw == null) return [];
-  return Array.isArray(raw) ? raw : [raw];
-}
-function svgLength(value, reference, fallback = 0) {
-  if (value == null) return fallback;
-  const s = String(value);
-  if (s.endsWith("%")) return parseFloat(s) / 100 * reference;
-  const n = Number(s);
-  return isNaN(n) ? fallback : n;
-}
-function parseFrac(value, fallback) {
-  if (value == null) return fallback;
-  const s = String(value);
-  if (s.endsWith("%")) return parseFloat(s) / 100;
-  return Number(s);
-}
-function applyOpacity(color, opacity) {
-  if (opacity >= 1) return color;
-  const parsed = parseCssColor(color);
-  if (!parsed) return color;
-  const [r, g, b] = parsed.values;
-  return `rgba(${r}, ${g}, ${b}, ${parsed.alpha * opacity})`;
-}
-function addGradientStops(gradient, def) {
-  for (const stop of normalizeChildren(def)) {
-    if (stop.type !== "stop") continue;
-    const sp = stop.props;
-    const offsetRaw = sp.offset ?? 0;
-    const offset = typeof offsetRaw === "string" && offsetRaw.endsWith("%") ? parseFloat(offsetRaw) / 100 : Number(offsetRaw);
-    const stopColor = sp.stopColor ?? sp["stop-color"] ?? "black";
-    const stopOpacity = Number(sp.stopOpacity ?? sp["stop-opacity"] ?? 1);
-    gradient.addColorStop(offset, applyOpacity(stopColor, stopOpacity));
-  }
-}
-function fillWithSvgGradient(ctx, def, bbox, path, fillRule) {
-  const props = def.props;
-  if (def.type === "linearGradient") {
-    const x1 = bbox.x + parseFrac(props.x1, 0) * bbox.width;
-    const y1 = bbox.y + parseFrac(props.y1, 0) * bbox.height;
-    const x2 = bbox.x + parseFrac(props.x2, 1) * bbox.width;
-    const y2 = bbox.y + parseFrac(props.y2, 0) * bbox.height;
-    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
-    addGradientStops(gradient, def);
-    ctx.fillStyle = gradient;
-    ctx.fill(path, fillRule);
-    return true;
-  }
-  if (def.type === "radialGradient") {
-    const cxF = parseFrac(props.cx, 0.5);
-    const cyF = parseFrac(props.cy, 0.5);
-    const rF = parseFrac(props.r, 0.5);
-    const fxF = parseFrac(props.fx, cxF);
-    const fyF = parseFrac(props.fy, cyF);
-    ctx.save();
-    ctx.translate(bbox.x, bbox.y);
-    ctx.scale(bbox.width, bbox.height);
-    const gradient = ctx.createRadialGradient(fxF, fyF, 0, cxF, cyF, rF);
-    addGradientStops(gradient, def);
-    ctx.fillStyle = gradient;
-    const unitPath = new Path2D();
-    const invTransform = {
-      a: 1 / bbox.width,
-      b: 0,
-      c: 0,
-      d: 1 / bbox.height,
-      e: -bbox.x / bbox.width,
-      f: -bbox.y / bbox.height
-    };
-    unitPath.addPath(path, invTransform);
-    ctx.fill(unitPath, fillRule);
-    ctx.restore();
-    return true;
-  }
-  return false;
+var EMPTY_DEFS = {
+  clips: /* @__PURE__ */ new Map(),
+  gradients: /* @__PURE__ */ new Map(),
+  masks: /* @__PURE__ */ new Map(),
+  filters: /* @__PURE__ */ new Map()
+};
+
+// src/jsx/draw/svg/transform.ts
+function applyTransformAndOpacity(ctx, transform, opacity) {
+  if (!transform && opacity >= 1) return false;
+  ctx.save();
+  if (transform) applySvgTransform(ctx, transform);
+  if (opacity < 1) ctx.globalAlpha *= opacity;
+  return true;
 }
-function strokeWithSvgGradient(ctx, def, bbox, path) {
-  const props = def.props;
-  if (def.type === "linearGradient") {
-    const x1 = bbox.x + parseFrac(props.x1, 0) * bbox.width;
-    const y1 = bbox.y + parseFrac(props.y1, 0) * bbox.height;
-    const x2 = bbox.x + parseFrac(props.x2, 1) * bbox.width;
-    const y2 = bbox.y + parseFrac(props.y2, 0) * bbox.height;
-    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
-    addGradientStops(gradient, def);
-    ctx.strokeStyle = gradient;
-    ctx.stroke(path);
-    return true;
-  }
-  if (def.type === "radialGradient") {
-    const cxAbs = bbox.x + parseFrac(props.cx, 0.5) * bbox.width;
-    const cyAbs = bbox.y + parseFrac(props.cy, 0.5) * bbox.height;
-    const rAbs = parseFrac(props.r, 0.5) * Math.sqrt(bbox.width * bbox.height);
-    const fxAbs = bbox.x + parseFrac(props.fx, 0.5) * bbox.width;
-    const fyAbs = bbox.y + parseFrac(props.fy, 0.5) * bbox.height;
-    const gradient = ctx.createRadialGradient(
-      fxAbs,
-      fyAbs,
-      0,
-      cxAbs,
-      cyAbs,
-      rAbs
-    );
-    addGradientStops(gradient, def);
-    ctx.strokeStyle = gradient;
-    ctx.stroke(path);
-    return true;
+function applySvgTransform(ctx, transform) {
+  const re = /\b(translate|scale|rotate|skewX|skewY|matrix)\s*\(([^)]*)\)/g;
+  let match;
+  while ((match = re.exec(transform)) !== null) {
+    const fn = match[1];
+    const args = match[2].split(/[\s,]+/).filter(Boolean).map(Number);
+    switch (fn) {
+      case "translate":
+        ctx.translate(args[0] ?? 0, args[1] ?? 0);
+        break;
+      case "scale": {
+        const sx = args[0] ?? 1;
+        ctx.scale(sx, args[1] ?? sx);
+        break;
+      }
+      case "rotate": {
+        const angle = (args[0] ?? 0) * Math.PI / 180;
+        if (args.length >= 3) {
+          const cx = args[1];
+          const cy = args[2];
+          ctx.translate(cx, cy);
+          ctx.rotate(angle);
+          ctx.translate(-cx, -cy);
+        } else {
+          ctx.rotate(angle);
+        }
+        break;
+      }
+      case "skewX":
+        ctx.transform(
+          1,
+          0,
+          Math.tan((args[0] ?? 0) * Math.PI / 180),
+          1,
+          0,
+          0
+        );
+        break;
+      case "skewY":
+        ctx.transform(
+          1,
+          Math.tan((args[0] ?? 0) * Math.PI / 180),
+          0,
+          1,
+          0,
+          0
+        );
+        break;
+      case "matrix":
+        ctx.transform(
+          args[0] ?? 1,
+          args[1] ?? 0,
+          args[2] ?? 0,
+          args[3] ?? 1,
+          args[4] ?? 0,
+          args[5] ?? 0
+        );
+        break;
+    }
   }
-  return false;
 }
+
+// src/jsx/draw/svg/path.ts
+import { Path2D } from "@napi-rs/canvas";
 function pathBBox(d) {
   let minX = Infinity;
   let minY = Infinity;
@@ -1739,53 +1749,17 @@ function buildClipPath(shapes, vbW, vbH) {
   }
   return combined;
 }
-function drawSvgContainer(ctx, node, x, y, width, height) {
-  ctx.save();
-  ctx.translate(x, y);
-  const viewBox = node.props.viewBox;
-  let vbW = width;
-  let vbH = height;
-  if (viewBox) {
-    const parts = viewBox.split(/[\s,]+/).map(Number);
-    if (parts.length === 4) {
-      const [vbX, vbY, parsedW, parsedH] = parts;
-      vbW = parsedW;
-      vbH = parsedH;
-      const scaleX = width / vbW;
-      const scaleY = height / vbH;
-      ctx.scale(scaleX, scaleY);
-      ctx.translate(-vbX, -vbY);
-    }
-  }
-  const color = node.style.color ?? "black";
-  const merged = mergeStyleIntoProps(node.props);
-  const inherited = {
-    fill: resolveCurrentColor(merged.fill, color) ?? "black",
-    stroke: resolveCurrentColor(merged.stroke, color),
-    strokeWidth: merged.strokeWidth ?? merged["stroke-width"],
-    strokeLinecap: merged.strokeLinecap ?? merged["stroke-linecap"],
-    strokeLinejoin: merged.strokeLinejoin ?? merged["stroke-linejoin"],
-    strokeOpacity: merged.strokeOpacity ?? merged["stroke-opacity"]
-  };
-  const children = node.props.children;
-  if (children != null) {
-    const childArray = Array.isArray(children) ? children : [children];
-    const svgChildren = childArray.filter(
-      (c) => c != null && typeof c === "object"
-    );
-    const defs = collectDefs(svgChildren);
-    for (const child of svgChildren) {
-      drawSvgChild(ctx, child, inherited, color, defs, vbW, vbH);
-    }
+function parsePoints(value) {
+  if (!value) return [];
+  const nums = value.trim().split(/[\s,]+/).map(Number);
+  const result = [];
+  for (let i = 0; i + 1 < nums.length; i += 2) {
+    result.push([nums[i], nums[i + 1]]);
   }
-  ctx.restore();
+  return result;
 }
-var EMPTY_DEFS = {
-  clips: /* @__PURE__ */ new Map(),
-  gradients: /* @__PURE__ */ new Map(),
-  masks: /* @__PURE__ */ new Map(),
-  filters: /* @__PURE__ */ new Map()
-};
+
+// src/jsx/draw/svg/filters.ts
 function applyFeOffset(input, dx, dy, w, h) {
   const [canvas, ctx] = acquireOffscreen(w, h);
   ctx.drawImage(input, dx, dy);
@@ -1845,18 +1819,18 @@ function applyFeColorMatrix(input, type, values, w, h) {
   }
   return canvas;
 }
+var BLEND_MODE_MAP = {
+  normal: "source-over",
+  multiply: "multiply",
+  screen: "screen",
+  darken: "darken",
+  lighten: "lighten",
+  overlay: "overlay"
+};
 function applyFeBlend(in1, in2, mode, w, h) {
-  const modeMap = {
-    normal: "source-over",
-    multiply: "multiply",
-    screen: "screen",
-    darken: "darken",
-    lighten: "lighten",
-    overlay: "overlay"
-  };
   const [canvas, ctx] = acquireOffscreen(w, h);
   ctx.drawImage(in2, 0, 0);
-  ctx.globalCompositeOperation = modeMap[mode] ?? "source-over";
+  ctx.globalCompositeOperation = BLEND_MODE_MAP[mode] ?? "source-over";
   ctx.drawImage(in1, 0, 0);
   ctx.globalCompositeOperation = "source-over";
   return canvas;
@@ -1932,103 +1906,181 @@ function applyFilter(filterDef, sourceGraphic, w, h) {
   }
   return lastResult;
 }
-function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
-  const { type } = child;
-  const props = mergeStyleIntoProps(child.props);
-  if (type === "defs" || type === "clipPath" || type === "mask" || type === "filter")
-    return;
-  const transform = type !== "g" ? props.transform : void 0;
-  const opacity = type !== "g" ? Number(props.opacity ?? 1) : 1;
-  if (transform || opacity < 1) {
+
+// src/jsx/draw/svg/shapes.ts
+import { Path2D as Path2D3 } from "@napi-rs/canvas";
+
+// src/jsx/draw/svg/gradients.ts
+import { Path2D as Path2D2 } from "@napi-rs/canvas";
+import parseCssColor from "parse-css-color";
+function parseFrac(value, fallback) {
+  if (value == null) return fallback;
+  const s = String(value);
+  if (s.endsWith("%")) return parseFloat(s) / 100;
+  return Number(s);
+}
+function applyOpacity(color, opacity) {
+  if (opacity >= 1) return color;
+  const parsed = parseCssColor(color);
+  if (!parsed) return color;
+  const [r, g, b] = parsed.values;
+  return `rgba(${r}, ${g}, ${b}, ${parsed.alpha * opacity})`;
+}
+function addGradientStops(gradient, def) {
+  for (const stop of normalizeChildren(def)) {
+    if (stop.type !== "stop") continue;
+    const sp = stop.props;
+    const offsetRaw = sp.offset ?? 0;
+    const offset = typeof offsetRaw === "string" && offsetRaw.endsWith("%") ? parseFloat(offsetRaw) / 100 : Number(offsetRaw);
+    const stopColor = sp.stopColor ?? sp["stop-color"] ?? "black";
+    const stopOpacity = Number(sp.stopOpacity ?? sp["stop-opacity"] ?? 1);
+    gradient.addColorStop(offset, applyOpacity(stopColor, stopOpacity));
+  }
+}
+function createLinearGradientFromBBox(ctx, props, bbox, def) {
+  const x1 = bbox.x + parseFrac(props.x1, 0) * bbox.width;
+  const y1 = bbox.y + parseFrac(props.y1, 0) * bbox.height;
+  const x2 = bbox.x + parseFrac(props.x2, 1) * bbox.width;
+  const y2 = bbox.y + parseFrac(props.y2, 0) * bbox.height;
+  const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+  addGradientStops(gradient, def);
+  return gradient;
+}
+function fillWithSvgGradient(ctx, def, bbox, path, fillRule) {
+  const props = def.props;
+  if (def.type === "linearGradient") {
+    ctx.fillStyle = createLinearGradientFromBBox(ctx, props, bbox, def);
+    ctx.fill(path, fillRule);
+    return true;
+  }
+  if (def.type === "radialGradient") {
+    const cxF = parseFrac(props.cx, 0.5);
+    const cyF = parseFrac(props.cy, 0.5);
+    const rF = parseFrac(props.r, 0.5);
+    const fxF = parseFrac(props.fx, cxF);
+    const fyF = parseFrac(props.fy, cyF);
     ctx.save();
-    if (transform) applySvgTransform(ctx, transform);
-    if (opacity < 1) ctx.globalAlpha *= opacity;
+    ctx.translate(bbox.x, bbox.y);
+    ctx.scale(bbox.width, bbox.height);
+    const gradient = ctx.createRadialGradient(fxF, fyF, 0, cxF, cyF, rF);
+    addGradientStops(gradient, def);
+    ctx.fillStyle = gradient;
+    const unitPath = new Path2D2();
+    const invTransform = {
+      a: 1 / bbox.width,
+      b: 0,
+      c: 0,
+      d: 1 / bbox.height,
+      e: -bbox.x / bbox.width,
+      f: -bbox.y / bbox.height
+    };
+    unitPath.addPath(path, invTransform);
+    ctx.fill(unitPath, fillRule);
+    ctx.restore();
+    return true;
   }
-  const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
-  const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
-  const clipPath = clipShapes ? buildClipPath(clipShapes, vbW, vbH) : void 0;
-  const maskRef = parseUrlRef(props.mask);
-  const maskShapes = maskRef ? defs.masks.get(maskRef) : void 0;
-  const filterRef = parseUrlRef(props.filter);
-  const filterDef = filterRef ? defs.filters.get(filterRef) : void 0;
-  if (clipPath) ctx.save();
-  if (clipPath) ctx.clip(clipPath);
-  const needsOffscreen = maskShapes || filterDef;
-  let elemCanvas;
-  const targetCtx = needsOffscreen ? (() => {
-    const [c, cCtx] = acquireOffscreen(Math.ceil(vbW), Math.ceil(vbH));
-    elemCanvas = c;
-    return cCtx;
-  })() : ctx;
-  switch (type) {
-    case "path":
-      drawPath(targetCtx, props, inherited, color, defs);
-      break;
-    case "circle":
-      drawCircle(targetCtx, props, inherited, color, defs, vbW, vbH);
-      break;
-    case "rect":
-      drawSvgRect(targetCtx, props, inherited, color, defs, vbW, vbH);
-      break;
-    case "line":
-      drawLine(targetCtx, props, inherited, color, defs, vbW, vbH);
-      break;
-    case "ellipse":
-      drawEllipse(targetCtx, props, inherited, color, defs, vbW, vbH);
-      break;
-    case "polygon":
-      drawPolygon(targetCtx, props, inherited, color, defs);
-      break;
-    case "polyline":
-      drawPolyline(targetCtx, props, inherited, color, defs);
-      break;
-    case "g":
-      drawGroup(targetCtx, child, inherited, color, defs, vbW, vbH);
-      break;
+  return false;
+}
+function strokeWithSvgGradient(ctx, def, bbox, path) {
+  const props = def.props;
+  if (def.type === "linearGradient") {
+    ctx.strokeStyle = createLinearGradientFromBBox(ctx, props, bbox, def);
+    ctx.stroke(path);
+    return true;
   }
-  if (needsOffscreen && elemCanvas) {
-    if (maskShapes) {
-      const [maskCanvas, maskCtx] = acquireOffscreen(
-        Math.ceil(vbW),
-        Math.ceil(vbH)
-      );
-      for (const shape of maskShapes) {
-        drawSvgChild(
-          maskCtx,
-          shape,
-          { fill: "white" },
-          "white",
-          defs,
-          vbW,
-          vbH
+  if (def.type === "radialGradient") {
+    const cxAbs = bbox.x + parseFrac(props.cx, 0.5) * bbox.width;
+    const cyAbs = bbox.y + parseFrac(props.cy, 0.5) * bbox.height;
+    const rAbs = parseFrac(props.r, 0.5) * Math.sqrt(bbox.width * bbox.height);
+    const fxAbs = bbox.x + parseFrac(props.fx, 0.5) * bbox.width;
+    const fyAbs = bbox.y + parseFrac(props.fy, 0.5) * bbox.height;
+    const gradient = ctx.createRadialGradient(
+      fxAbs,
+      fyAbs,
+      0,
+      cxAbs,
+      cyAbs,
+      rAbs
+    );
+    addGradientStops(gradient, def);
+    ctx.strokeStyle = gradient;
+    ctx.stroke(path);
+    return true;
+  }
+  return false;
+}
+
+// src/jsx/draw/svg/paint.ts
+function applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox) {
+  const fill = resolveCurrentColor(props.fill, color) ?? inherited.fill;
+  const fillRule = props.fillRule ?? props["fill-rule"];
+  const fillOpacity = Number(props.fillOpacity ?? props["fill-opacity"] ?? 1);
+  const fillRef = parseUrlRef(fill);
+  if (fillRef) {
+    const gradientDef = defs.gradients.get(fillRef);
+    if (gradientDef) {
+      if (fillOpacity < 1) {
+        ctx.save();
+        ctx.globalAlpha *= fillOpacity;
+        fillWithSvgGradient(
+          ctx,
+          gradientDef,
+          bbox,
+          path,
+          fillRule ?? "nonzero"
+        );
+        ctx.restore();
+      } else {
+        fillWithSvgGradient(
+          ctx,
+          gradientDef,
+          bbox,
+          path,
+          fillRule ?? "nonzero"
         );
       }
-      targetCtx.globalCompositeOperation = "destination-in";
-      targetCtx.drawImage(maskCanvas, 0, 0);
-      targetCtx.globalCompositeOperation = "source-over";
-      releaseOffscreen(maskCanvas);
-    }
-    if (filterDef) {
-      const filteredCanvas = applyFilter(
-        filterDef,
-        elemCanvas,
-        Math.ceil(vbW),
-        Math.ceil(vbH)
-      );
-      ctx.drawImage(filteredCanvas, 0, 0);
-      if (filteredCanvas !== elemCanvas) releaseOffscreen(filteredCanvas);
-    } else {
-      ctx.drawImage(elemCanvas, 0, 0);
     }
-    releaseOffscreen(elemCanvas);
+  } else if (fill !== "none") {
+    ctx.fillStyle = applyOpacity(fill, fillOpacity);
+    ctx.fill(path, fillRule ?? "nonzero");
   }
-  if (clipPath) ctx.restore();
-  if (transform || opacity < 1) ctx.restore();
+  applyStroke(ctx, props, path, inherited, color, defs, bbox);
+}
+function applyStroke(ctx, props, path, inherited, color, defs, bbox) {
+  const stroke = resolveCurrentColor(props.stroke, color) ?? inherited.stroke;
+  if (!stroke || stroke === "none") return;
+  const strokeOpacity = Number(
+    props.strokeOpacity ?? props["stroke-opacity"] ?? inherited.strokeOpacity ?? 1
+  );
+  ctx.lineWidth = Number(
+    props.strokeWidth ?? props["stroke-width"] ?? inherited.strokeWidth ?? 1
+  );
+  ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? inherited.strokeLinecap ?? "butt";
+  ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? inherited.strokeLinejoin ?? "miter";
+  const strokeRef = parseUrlRef(stroke);
+  if (strokeRef) {
+    const gradientDef = defs.gradients.get(strokeRef);
+    if (gradientDef) {
+      if (strokeOpacity < 1) {
+        ctx.save();
+        ctx.globalAlpha *= strokeOpacity;
+        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+        ctx.restore();
+      } else {
+        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
+      }
+      return;
+    }
+  }
+  ctx.strokeStyle = applyOpacity(stroke, strokeOpacity);
+  ctx.stroke(path);
 }
+
+// src/jsx/draw/svg/shapes.ts
 function drawPath(ctx, props, inherited, color, defs) {
   const d = props.d;
   if (!d) return;
-  const path = new Path2D(d);
+  const path = new Path2D3(d);
   const bbox = pathBBox(d);
   applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
@@ -2037,7 +2089,7 @@ function drawCircle(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const cy = svgLength(props.cy, vbH);
   const r = svgLength(props.r, Math.min(vbW, vbH));
   if (r <= 0) return;
-  const path = new Path2D();
+  const path = new Path2D3();
   path.arc(cx, cy, r, 0, Math.PI * 2);
   const bbox = { x: cx - r, y: cy - r, width: 2 * r, height: 2 * r };
   applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
@@ -2054,7 +2106,7 @@ function drawSvgRect(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   let ry = ryRaw >= 0 ? ryRaw : rx;
   rx = Math.min(rx, w / 2);
   ry = Math.min(ry, h / 2);
-  const path = new Path2D();
+  const path = new Path2D3();
   if (rx > 0 || ry > 0) {
     path.roundRect(x, y, w, h, [rx]);
   } else {
@@ -2068,7 +2120,7 @@ function drawLine(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const y1 = svgLength(props.y1, vbH);
   const x2 = svgLength(props.x2, vbW);
   const y2 = svgLength(props.y2, vbH);
-  const path = new Path2D();
+  const path = new Path2D3();
   path.moveTo(x1, y1);
   path.lineTo(x2, y2);
   const bbox = {
@@ -2085,7 +2137,7 @@ function drawEllipse(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
   const rx = svgLength(props.rx, vbW);
   const ry = svgLength(props.ry, vbH);
   if (rx <= 0 || ry <= 0) return;
-  const path = new Path2D();
+  const path = new Path2D3();
   path.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
   const bbox = {
     x: cx - rx,
@@ -2098,7 +2150,7 @@ function drawEllipse(ctx, props, inherited, color, defs, vbW = 0, vbH = 0) {
 function drawPolygon(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
-  const path = new Path2D();
+  const path = new Path2D3();
   path.moveTo(points[0][0], points[0][1]);
   for (let i = 1; i < points.length; i++) {
     path.lineTo(points[i][0], points[i][1]);
@@ -2110,7 +2162,7 @@ function drawPolygon(ctx, props, inherited, color, defs) {
 function drawPolyline(ctx, props, inherited, color, defs) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
-  const path = new Path2D();
+  const path = new Path2D3();
   path.moveTo(points[0][0], points[0][1]);
   for (let i = 1; i < points.length; i++) {
     path.lineTo(points[i][0], points[i][1]);
@@ -2118,167 +2170,156 @@ function drawPolyline(ctx, props, inherited, color, defs) {
   const bbox = pointsBBox(points);
   applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox);
 }
-function applySvgTransform(ctx, transform) {
-  const re = /\b(translate|scale|rotate|skewX|skewY|matrix)\s*\(([^)]*)\)/g;
-  let match;
-  while ((match = re.exec(transform)) !== null) {
-    const fn = match[1];
-    const args = match[2].split(/[\s,]+/).filter(Boolean).map(Number);
-    switch (fn) {
-      case "translate":
-        ctx.translate(args[0] ?? 0, args[1] ?? 0);
-        break;
-      case "scale": {
-        const sx = args[0] ?? 1;
-        ctx.scale(sx, args[1] ?? sx);
-        break;
-      }
-      case "rotate": {
-        const angle = (args[0] ?? 0) * Math.PI / 180;
-        if (args.length >= 3) {
-          const cx = args[1];
-          const cy = args[2];
-          ctx.translate(cx, cy);
-          ctx.rotate(angle);
-          ctx.translate(-cx, -cy);
-        } else {
-          ctx.rotate(angle);
-        }
-        break;
-      }
-      case "skewX":
-        ctx.transform(
-          1,
-          0,
-          Math.tan((args[0] ?? 0) * Math.PI / 180),
-          1,
-          0,
-          0
-        );
-        break;
-      case "skewY":
-        ctx.transform(
-          1,
-          Math.tan((args[0] ?? 0) * Math.PI / 180),
-          0,
-          1,
-          0,
-          0
-        );
-        break;
-      case "matrix":
-        ctx.transform(
-          args[0] ?? 1,
-          args[1] ?? 0,
-          args[2] ?? 0,
-          args[3] ?? 1,
-          args[4] ?? 0,
-          args[5] ?? 0
-        );
-        break;
-    }
+
+// src/jsx/draw/svg/traverse.ts
+function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
+  const { type } = child;
+  const props = mergeStyleIntoProps(child.props);
+  if (type === "defs" || type === "clipPath" || type === "mask" || type === "filter")
+    return;
+  const transform = type !== "g" ? props.transform : void 0;
+  const opacity = type !== "g" ? Number(props.opacity ?? 1) : 1;
+  const savedTransform = applyTransformAndOpacity(ctx, transform, opacity);
+  const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
+  const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
+  const clipPath = clipShapes ? buildClipPath(clipShapes, vbW, vbH) : void 0;
+  const maskRef = parseUrlRef(props.mask);
+  const maskShapes = maskRef ? defs.masks.get(maskRef) : void 0;
+  const filterRef = parseUrlRef(props.filter);
+  const filterDef = filterRef ? defs.filters.get(filterRef) : void 0;
+  if (clipPath) {
+    ctx.save();
+    ctx.clip(clipPath);
+  }
+  const needsOffscreen = maskShapes || filterDef;
+  let elemCanvas;
+  let targetCtx;
+  if (needsOffscreen) {
+    const [c, cCtx] = acquireOffscreen(Math.ceil(vbW), Math.ceil(vbH));
+    elemCanvas = c;
+    targetCtx = cCtx;
+  } else {
+    targetCtx = ctx;
+  }
+  switch (type) {
+    case "path":
+      drawPath(targetCtx, props, inherited, color, defs);
+      break;
+    case "circle":
+      drawCircle(targetCtx, props, inherited, color, defs, vbW, vbH);
+      break;
+    case "rect":
+      drawSvgRect(targetCtx, props, inherited, color, defs, vbW, vbH);
+      break;
+    case "line":
+      drawLine(targetCtx, props, inherited, color, defs, vbW, vbH);
+      break;
+    case "ellipse":
+      drawEllipse(targetCtx, props, inherited, color, defs, vbW, vbH);
+      break;
+    case "polygon":
+      drawPolygon(targetCtx, props, inherited, color, defs);
+      break;
+    case "polyline":
+      drawPolyline(targetCtx, props, inherited, color, defs);
+      break;
+    case "g":
+      drawGroup(targetCtx, child, props, inherited, color, defs, vbW, vbH);
+      break;
+  }
+  if (needsOffscreen && elemCanvas) {
+    applyOffscreenEffects(
+      ctx,
+      elemCanvas,
+      targetCtx,
+      maskShapes,
+      filterDef,
+      color,
+      defs,
+      vbW,
+      vbH
+    );
   }
+  if (clipPath) ctx.restore();
+  if (savedTransform) ctx.restore();
 }
-function drawGroup(ctx, node, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
+function drawGroup(ctx, node, mergedProps, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH = 0) {
   const children = normalizeChildren(node);
   if (children.length === 0) return;
-  const merged = mergeStyleIntoProps(node.props);
-  const groupInherited = {
-    fill: resolveCurrentColor(merged.fill, color) ?? inherited.fill,
-    stroke: resolveCurrentColor(merged.stroke, color) ?? inherited.stroke,
-    strokeWidth: merged.strokeWidth ?? merged["stroke-width"] ?? inherited.strokeWidth,
-    strokeLinecap: merged.strokeLinecap ?? merged["stroke-linecap"] ?? inherited.strokeLinecap,
-    strokeLinejoin: merged.strokeLinejoin ?? merged["stroke-linejoin"] ?? inherited.strokeLinejoin,
-    strokeOpacity: merged.strokeOpacity ?? merged["stroke-opacity"] ?? inherited.strokeOpacity
-  };
-  const opacity = Number(merged.opacity ?? 1);
-  const transform = merged.transform;
-  if (transform || opacity < 1) {
-    ctx.save();
-    if (transform) applySvgTransform(ctx, transform);
-    if (opacity < 1) ctx.globalAlpha *= opacity;
-  }
+  const groupInherited = resolveInheritedStyle(mergedProps, color, inherited);
+  const opacity = Number(mergedProps.opacity ?? 1);
+  const transform = mergedProps.transform;
+  const saved = applyTransformAndOpacity(ctx, transform, opacity);
   for (const child of children) {
     if (child != null && typeof child === "object") {
       drawSvgChild(ctx, child, groupInherited, color, defs, vbW, vbH);
     }
   }
-  if (transform || opacity < 1) {
-    ctx.restore();
-  }
+  if (saved) ctx.restore();
 }
-function parsePoints(value) {
-  if (!value) return [];
-  const nums = value.trim().split(/[\s,]+/).map(Number);
-  const result = [];
-  for (let i = 0; i + 1 < nums.length; i += 2) {
-    result.push([nums[i], nums[i + 1]]);
+function applyOffscreenEffects(ctx, elemCanvas, targetCtx, maskShapes, filterDef, color, defs, vbW, vbH) {
+  if (maskShapes) {
+    const [maskCanvas, maskCtx] = acquireOffscreen(
+      Math.ceil(vbW),
+      Math.ceil(vbH)
+    );
+    for (const shape of maskShapes) {
+      drawSvgChild(maskCtx, shape, { fill: "white" }, "white", defs, vbW, vbH);
+    }
+    targetCtx.globalCompositeOperation = "destination-in";
+    targetCtx.drawImage(maskCanvas, 0, 0);
+    targetCtx.globalCompositeOperation = "source-over";
+    releaseOffscreen(maskCanvas);
+  }
+  if (filterDef) {
+    const filteredCanvas = applyFilter(
+      filterDef,
+      elemCanvas,
+      Math.ceil(vbW),
+      Math.ceil(vbH)
+    );
+    ctx.drawImage(filteredCanvas, 0, 0);
+    if (filteredCanvas !== elemCanvas) releaseOffscreen(filteredCanvas);
+  } else {
+    ctx.drawImage(elemCanvas, 0, 0);
   }
-  return result;
+  releaseOffscreen(elemCanvas);
 }
-function applyFillAndStroke(ctx, props, path, inherited, color, defs, bbox) {
-  const fill = resolveCurrentColor(props.fill, color) ?? inherited.fill;
-  const fillRule = props.fillRule ?? props["fill-rule"];
-  const fillOpacity = Number(props.fillOpacity ?? props["fill-opacity"] ?? 1);
-  const fillRef = parseUrlRef(fill);
-  if (fillRef) {
-    const gradientDef = defs.gradients.get(fillRef);
-    if (gradientDef) {
-      if (fillOpacity < 1) {
-        ctx.save();
-        ctx.globalAlpha *= fillOpacity;
-        fillWithSvgGradient(
-          ctx,
-          gradientDef,
-          bbox,
-          path,
-          fillRule ?? "nonzero"
-        );
-        ctx.restore();
-      } else {
-        fillWithSvgGradient(
-          ctx,
-          gradientDef,
-          bbox,
-          path,
-          fillRule ?? "nonzero"
-        );
-      }
+
+// src/jsx/draw/svg/index.ts
+function drawSvgContainer(ctx, node, x, y, width, height) {
+  ctx.save();
+  ctx.translate(x, y);
+  const viewBox = node.props.viewBox;
+  let vbW = width;
+  let vbH = height;
+  if (viewBox) {
+    const parts = viewBox.split(/[\s,]+/).map(Number);
+    if (parts.length === 4) {
+      const [vbX, vbY, parsedW, parsedH] = parts;
+      vbW = parsedW;
+      vbH = parsedH;
+      const scaleX = width / vbW;
+      const scaleY = height / vbH;
+      ctx.scale(scaleX, scaleY);
+      ctx.translate(-vbX, -vbY);
     }
-  } else if (fill !== "none") {
-    ctx.fillStyle = applyOpacity(fill, fillOpacity);
-    ctx.fill(path, fillRule ?? "nonzero");
   }
-  applyStroke(ctx, props, path, inherited, color, defs, bbox);
-}
-function applyStroke(ctx, props, path, inherited, color, defs, bbox) {
-  const stroke = resolveCurrentColor(props.stroke, color) ?? inherited.stroke;
-  if (!stroke || stroke === "none") return;
-  const strokeOpacity = Number(
-    props.strokeOpacity ?? props["stroke-opacity"] ?? inherited.strokeOpacity ?? 1
-  );
-  ctx.lineWidth = Number(
-    props.strokeWidth ?? props["stroke-width"] ?? inherited.strokeWidth ?? 1
-  );
-  ctx.lineCap = props.strokeLinecap ?? props["stroke-linecap"] ?? inherited.strokeLinecap ?? "butt";
-  ctx.lineJoin = props.strokeLinejoin ?? props["stroke-linejoin"] ?? inherited.strokeLinejoin ?? "miter";
-  const strokeRef = parseUrlRef(stroke);
-  if (strokeRef) {
-    const gradientDef = defs.gradients.get(strokeRef);
-    if (gradientDef) {
-      if (strokeOpacity < 1) {
-        ctx.save();
-        ctx.globalAlpha *= strokeOpacity;
-        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
-        ctx.restore();
-      } else {
-        strokeWithSvgGradient(ctx, gradientDef, bbox, path);
-      }
-      return;
+  const color = node.style.color ?? "black";
+  const merged = mergeStyleIntoProps(node.props);
+  const inherited = resolveInheritedStyle(merged, color);
+  const children = node.props.children;
+  if (children != null) {
+    const childArray = Array.isArray(children) ? children : [children];
+    const svgChildren = childArray.filter(
+      (c) => c != null && typeof c === "object"
+    );
+    const defs = collectDefs(svgChildren);
+    for (const child of svgChildren) {
+      drawSvgChild(ctx, child, inherited, color, defs, vbW, vbH);
     }
   }
-  ctx.strokeStyle = applyOpacity(stroke, strokeOpacity);
-  ctx.stroke(path);
+  ctx.restore();
 }
 
 // src/jsx/draw/text.ts
@@ -2565,7 +2606,7 @@ function drawTextDecoration(ctx, seg, offsetX, offsetY) {
 }
 
 // src/jsx/draw/index.ts
-async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
+async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle, imageCache) {
   const x = parentX + node.x;
   const y = parentY + node.y;
   const { width, height, style } = node;
@@ -2585,6 +2626,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
       const [offscreen, offCtx] = acquireOffscreen(bufW, bufH);
       offCtx.save();
       offCtx.scale(qx, qy);
+      const cache2 = imageCache ?? /* @__PURE__ */ new Map();
       await drawNodeCore(
         offCtx,
         node,
@@ -2594,6 +2636,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
         1 - y,
         debug,
         emojiStyle,
+        cache2,
         transformWithoutScale
       );
       offCtx.restore();
@@ -2627,7 +2670,18 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
       return;
     }
   }
-  await drawNodeCore(ctx, node, parentX, parentY, 0, 0, debug, emojiStyle);
+  const cache = imageCache ?? /* @__PURE__ */ new Map();
+  await drawNodeCore(
+    ctx,
+    node,
+    parentX,
+    parentY,
+    0,
+    0,
+    debug,
+    emojiStyle,
+    cache
+  );
 }
 function extractScale(transform) {
   const scaleMatch = transform.match(/\b(scale|scaleX|scaleY)\(([^)]+)\)/);
@@ -2639,7 +2693,7 @@ function extractScale(transform) {
   const remaining = transform.replace(fullMatch, "").trim();
   return { sx, sy, remaining };
 }
-async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug, emojiStyle, overrideTransform) {
+async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug, emojiStyle, imageCache, overrideTransform) {
   const x = parentX + node.x + offsetX;
   const y = parentY + node.y + offsetY;
   const { width, height, style } = node;
@@ -2705,7 +2759,7 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
           if (hasRadius(borderRadius)) {
             applyClip(ctx, x, y, width, height, borderRadius);
           }
-          const image = await loadImage3(urlMatch[1]);
+          const image = await cachedLoadImage(imageCache, urlMatch[1]);
           const bgSize = style.backgroundSize;
           if (bgSize === "cover") {
             const r = computeCover(
@@ -2814,8 +2868,8 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
       imgY,
       imgW,
       imgH,
-      style,
-      node.props.__loadedImage
+      imageCache,
+      style
     );
   }
   if (node.type === "svg") {
@@ -2823,7 +2877,7 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
   } else {
     for (const child of node.children) {
       if (offsetX === 0 && offsetY === 0) {
-        await drawNode(ctx, child, x, y, debug, emojiStyle);
+        await drawNode(ctx, child, x, y, debug, emojiStyle, imageCache);
       } else {
         await drawNodeCore(
           ctx,
@@ -2834,7 +2888,7 @@ async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug
           0,
           debug,
           emojiStyle,
-          void 0
+          imageCache
         );
       }
     }
@@ -2906,9 +2960,6 @@ function parseAngle(value) {
   return parseFloat(value);
 }
 
-// src/jsx/layout.ts
-import { loadImage as loadImage4 } from "@napi-rs/canvas";
-
 // src/jsx/style/expand.ts
 var SIDES = ["Top", "Right", "Bottom", "Left"];
 function parseSides(value) {
@@ -3295,6 +3346,7 @@ function applyEdgeValue(node, setter, edge, value) {
 
 // src/jsx/layout.ts
 async function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled, fontFamilies) {
+  const imageCache = /* @__PURE__ */ new Map();
   const elementYogaNode = createYogaNode();
   const rootStyle = fontFamilies?.length ? { ...DEFAULT_STYLE, fontFamily: fontFamilies.join(", ") } : DEFAULT_STYLE;
   const elementNode = await buildNode(
@@ -3305,7 +3357,8 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
     containerHeight,
     ctx,
     emojiEnabled,
-    fontFamilies
+    fontFamilies,
+    imageCache
   );
   const rootYogaNode = createYogaNode();
   rootYogaNode.setWidth(containerWidth);
@@ -3315,7 +3368,7 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
   rootYogaNode.calculateLayout(containerWidth, containerHeight);
   const elementLayout = extractLayout(elementNode, elementYogaNode);
   freeYogaNode(rootYogaNode);
-  return {
+  const tree = {
     type: "div",
     style: rootStyle,
     children: [elementLayout],
@@ -3325,8 +3378,9 @@ async function buildLayoutTree(element, containerWidth, containerHeight, ctx, em
     width: containerWidth,
     height: containerHeight
   };
+  return { tree, imageCache };
 }
-async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled, fontFamilies) {
+async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewportHeight, ctx, emojiEnabled, fontFamilies, imageCache) {
   if (element === null || element === void 0 || typeof element === "boolean") {
     return {
       type: "empty",
@@ -3364,7 +3418,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       viewportHeight,
       ctx,
       emojiEnabled,
-      fontFamilies
+      fontFamilies,
+      imageCache
     );
   }
   const props = el.props ?? {};
@@ -3424,7 +3479,7 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
     const src = props.src;
     if (src) {
       try {
-        const image = await loadImage4(src);
+        const image = await cachedLoadImage(imageCache ?? /* @__PURE__ */ new Map(), src);
         const naturalW = image.width;
         const naturalH = image.height;
         const wSet = style.width !== void 0;
@@ -3434,7 +3489,6 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
         } else if (hSet && !wSet && typeof style.height === "number" && naturalH > 0) {
           style.width = style.height * (naturalW / naturalH);
         }
-        props.__loadedImage = image;
       } catch {
       }
     }
@@ -3512,7 +3566,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
           viewportHeight,
           ctx,
           emojiEnabled,
-          fontFamilies
+          fontFamilies,
+          imageCache
         )
       );
     }
@@ -3586,7 +3641,7 @@ async function renderReactElement(ctx, element, options) {
   const height = options.height ?? ctx.canvas.height;
   const emojiStyle = options.emoji === "none" ? void 0 : options.emoji ?? "twemoji";
   const fontFamilies = [...new Set(options.fonts.map((f) => f.name))];
-  const layoutTree = await buildLayoutTree(
+  const { tree: layoutTree, imageCache } = await buildLayoutTree(
     element,
     width,
     height,
@@ -3594,7 +3649,15 @@ async function renderReactElement(ctx, element, options) {
     !!emojiStyle,
     fontFamilies
   );
-  await drawNode(ctx, layoutTree, 0, 0, options.debug ?? false, emojiStyle);
+  await drawNode(
+    ctx,
+    layoutTree,
+    0,
+    0,
+    options.debug ?? false,
+    emojiStyle,
+    imageCache
+  );
 }
 
 // src/index.ts
@@ -3610,7 +3673,7 @@ export {
   Image,
   LottieAnimation,
   createCanvas3 as createCanvas,
-  loadImage5 as loadImage,
+  loadImage3 as loadImage,
   loadLottie,
   registerFont,
   registerFontFromPath,