@effing/canvas 0.19.2 → 0.20.0

package/README.md

@@ -69,7 +69,7 @@ JSX → Yoga layout → Skia canvas → PNG
 2. **Skia** draws each node to a canvas context (backgrounds, borders, text, images, SVG, gradients)
 3. **Encode** the canvas to PNG or JPEG via `canvas.encode()` or `canvas.encodeSync()`
 
-Canvas dimensions are taken from the context itself (`ctx.canvas.width` / `ctx.canvas.height`), so there are no `width`/`height` options — just create a canvas at the size you need.
+Canvas dimensions default to `ctx.canvas.width` / `ctx.canvas.height`, but you can override them with the `width` and `height` options. This is useful for HiDPI rendering where the canvas is larger than the logical layout size.
 
 ### Font Loading
 
@@ -123,6 +123,114 @@ renderLottieFrame(ctx, anim, 0); // render frame 0
 const png = canvas.encodeSync("png");
 ```
 
+## Supported CSS Properties
+
+### Layout
+
+| Property                         | Values / Notes                                      |
+| -------------------------------- | --------------------------------------------------- |
+| `display`                        | `flex`, `none`                                      |
+| `position`                       | `relative`, `absolute`                              |
+| `top`, `right`, `bottom`, `left` | Length, percentage                                  |
+| `overflow`                       | `visible`, `hidden` (also `overflowX`, `overflowY`) |
+
+### Flexbox
+
+| Property              | Values / Notes                                                                      |
+| --------------------- | ----------------------------------------------------------------------------------- |
+| `flexDirection`       | `row`, `column`, `row-reverse`, `column-reverse`                                    |
+| `flexWrap`            | `nowrap`, `wrap`, `wrap-reverse`                                                    |
+| `justifyContent`      | `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly` |
+| `alignItems`          | `flex-start`, `flex-end`, `center`, `stretch`, `baseline`                           |
+| `alignSelf`           | `auto`, `flex-start`, `flex-end`, `center`, `stretch`, `baseline`                   |
+| `alignContent`        | `flex-start`, `flex-end`, `center`, `stretch`, `space-between`, `space-around`      |
+| `flex`                | Shorthand for `flexGrow`, `flexShrink`, `flexBasis`                                 |
+| `flexGrow`            | Number                                                                              |
+| `flexShrink`          | Number                                                                              |
+| `flexBasis`           | Length, percentage                                                                  |
+| `gap`                 | Shorthand for `rowGap`, `columnGap`                                                 |
+| `rowGap`, `columnGap` | Number                                                                              |
+
+### Dimensions
+
+| Property                | Values / Notes     |
+| ----------------------- | ------------------ |
+| `width`, `height`       | Length, percentage |
+| `minWidth`, `minHeight` | Length, percentage |
+| `maxWidth`, `maxHeight` | Length, percentage |
+
+### Spacing
+
+| Property                                                     | Values / Notes                          |
+| ------------------------------------------------------------ | --------------------------------------- |
+| `margin`                                                     | Shorthand (1–4 values), supports `auto` |
+| `marginTop`, `marginRight`, `marginBottom`, `marginLeft`     | Length, percentage, `auto`              |
+| `padding`                                                    | Shorthand (1–4 values)                  |
+| `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` | Length, percentage                      |
+
+### Border
+
+| Property                                                 | Values / Notes                      |
+| -------------------------------------------------------- | ----------------------------------- |
+| `border`                                                 | Shorthand, e.g. `"1px solid black"` |
+| `borderTop`, `borderRight`, `borderBottom`, `borderLeft` | Per-side shorthand                  |
+| `borderWidth`, `borderColor`, `borderStyle`              | Shorthand (1–4 values)              |
+| `border{Top,Right,Bottom,Left}{Width,Color,Style}`       | Per-side longhands                  |
+| `borderRadius`                                           | Shorthand (1–4 values)              |
+| `border{TopLeft,TopRight,BottomRight,BottomLeft}Radius`  | Per-corner longhands                |
+
+### Color & Background
+
+| Property          | Values / Notes                                     |
+| ----------------- | -------------------------------------------------- |
+| `color`           | Any CSS color (inherited)                          |
+| `backgroundColor` | Any CSS color                                      |
+| `opacity`         | Number (0–1)                                       |
+| `background`      | Shorthand → `backgroundColor` or `backgroundImage` |
+| `backgroundImage` | `linear-gradient()`, `radial-gradient()`, `url()`  |
+| `backgroundSize`  | `cover`, `contain`, length, percentage             |
+
+### Typography
+
+| Property         | Values / Notes                                                |
+| ---------------- | ------------------------------------------------------------- |
+| `fontFamily`     | Font name (inherited)                                         |
+| `fontSize`       | Number or CSS length (inherited)                              |
+| `fontWeight`     | Numeric weight (inherited)                                    |
+| `fontStyle`      | `normal`, `italic` (inherited)                                |
+| `textAlign`      | `left`, `center`, `right`, `justify` (inherited)              |
+| `textDecoration` | String (inherited)                                            |
+| `textTransform`  | `none`, `uppercase`, `lowercase`, `capitalize` (inherited)    |
+| `lineHeight`     | Number or string (inherited)                                  |
+| `letterSpacing`  | Number or CSS length (inherited)                              |
+| `whiteSpace`     | `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line` (inherited) |
+| `wordBreak`      | `normal`, `break-all`, `break-word`, `keep-all` (inherited)   |
+| `textOverflow`   | `clip`, `ellipsis` (inherited)                                |
+| `lineClamp`      | Number — max visible lines (adds ellipsis)                    |
+| `textBox`        | Shorthand for `textBoxTrim` and `textBoxEdge`                 |
+| `textBoxTrim`    | `none`, `trim-start`, `trim-end`, `trim-both` (inherited)     |
+| `textBoxEdge`    | e.g. `"cap alphabetic"` (inherited)                           |
+
+### Effects
+
+| Property          | Values / Notes                                   |
+| ----------------- | ------------------------------------------------ |
+| `boxShadow`       | CSS box-shadow string                            |
+| `textShadow`      | CSS text-shadow string                           |
+| `transform`       | `translate`, `scale`, `rotate`, `skewX`, `skewY` |
+| `transformOrigin` | CSS transform-origin string                      |
+| `filter`          | CSS filter string                                |
+
+### Image
+
+| Property    | Values / Notes                                   |
+| ----------- | ------------------------------------------------ |
+| `objectFit` | `contain`, `cover`, `fill`, `none`, `scale-down` |
+
+### Units
+
+`px`, `em`, `rem`, `%`, `vw`, `vh`, `vmin`, `vmax`, `pt`, `pc`, `in`, `cm`, `mm`
+
 ## API Overview
 
 ### `createCanvas(width, height)`
@@ -176,11 +284,13 @@ function renderLottieFrame(
 
 ### Options
 
-| Option  | Type                   | Required | Description                              |
-| ------- | ---------------------- | -------- | ---------------------------------------- |
-| `fonts` | `FontData[]`           | Yes      | Font data for text rendering             |
-| `debug` | `boolean`              | No       | Draw layout bounding boxes for debugging |
-| `emoji` | `EmojiStyle \| "none"` | No       | Emoji style (default: `"twemoji"`)       |
+| Option   | Type                   | Required | Description                                           |
+| -------- | ---------------------- | -------- | ----------------------------------------------------- |
+| `fonts`  | `FontData[]`           | Yes      | Font data for text rendering                          |
+| `width`  | `number`               | No       | Layout width override (default: `ctx.canvas.width`)   |
+| `height` | `number`               | No       | Layout height override (default: `ctx.canvas.height`) |
+| `debug`  | `boolean`              | No       | Draw layout bounding boxes for debugging              |
+| `emoji`  | `EmojiStyle \| "none"` | No       | Emoji style (default: `"twemoji"`)                    |
 
 ### Types
 
@@ -276,6 +386,25 @@ await renderReactElement(ctx, <MyComponent />, {
 });
 ```
 
+### HiDPI Rendering
+
+For sharp output on high-DPI displays, you can create a larger canvas and use `width`/`height` overrides to keep layout at the logical size:
+
+```typescript
+const dpr = 2;
+const canvas = createCanvas(1080 * dpr, 1080 * dpr);
+const ctx = canvas.getContext("2d");
+ctx.scale(dpr, dpr);
+
+await renderReactElement(ctx, <MyComponent />, {
+  fonts,
+  width: 1080,
+  height: 1080,
+});
+
+const png = await canvas.encode("png");
+```
+
 ## Related Packages
 
 - [`@effing/tween`](../tween) — Step iteration and easing for frame generation

package/dist/index.d.ts

@@ -63,6 +63,10 @@ type FontData = {
 type RenderReactElementOptions = {
     /** Font data for text rendering */
     fonts: FontData[];
+    /** Layout width override. Defaults to `ctx.canvas.width`. */
+    width?: number;
+    /** Layout height override. Defaults to `ctx.canvas.height`. */
+    height?: number;
     /** Draw layout bounding boxes for debugging */
     debug?: boolean;
     /** Emoji style for rendering emoji characters as images. Defaults to "twemoji". Pass "none" to disable. */
@@ -72,12 +76,13 @@ type RenderReactElementOptions = {
 /**
  * Render a React element tree to a canvas context.
  *
- * Width and height are taken from the canvas itself (`ctx.canvas.width` /
- * `ctx.canvas.height`).
+ * Width and height default to `ctx.canvas.width` / `ctx.canvas.height` but
+ * can be overridden via `options.width` and `options.height`. This is useful
+ * for HiDPI rendering where the canvas is larger than the logical layout size.
  *
  * @param ctx - Canvas 2D rendering context to draw into
  * @param element - React element tree to render
- * @param options - Rendering options (fonts, debug mode)
+ * @param options - Rendering options (fonts, dimensions, debug mode)
  *
  * @example
  * ```tsx
@@ -90,6 +95,20 @@ type RenderReactElementOptions = {
  *
  * const png = canvas.encodeSync("png");
  * ```
+ *
+ * @example HiDPI rendering (2x)
+ * ```tsx
+ * const dpr = 2;
+ * const canvas = createCanvas(1080 * dpr, 1080 * dpr);
+ * const ctx = canvas.getContext("2d");
+ * ctx.scale(dpr, dpr);
+ *
+ * await renderReactElement(ctx, <MyComponent />, {
+ *   fonts: [myFont],
+ *   width: 1080,
+ *   height: 1080,
+ * });
+ * ```
  */
 declare function renderReactElement(ctx: SKRSContext2D, element: ReactNode, options: RenderReactElementOptions): Promise<void>;
 

package/dist/index.js

@@ -266,8 +266,7 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
     processedText = text.replace(/\b\w/g, (c) => c.toUpperCase());
   }
   const noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
-  const preserveWhitespace = whiteSpace === "pre" || whiteSpace === "pre-wrap";
-  const paragraphs = preserveWhitespace ? processedText.split("\n") : processedText.split("\n");
+  const paragraphs = processedText.split("\n");
   const lines = [];
   for (const paragraph of paragraphs) {
     if (noWrap) {
@@ -304,6 +303,21 @@ function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
       );
     }
   }
+  const lineClamp = style.lineClamp;
+  if (lineClamp && lineClamp > 0 && lines.length > lineClamp) {
+    const lastLineText = lines.slice(lineClamp - 1).join(" ");
+    lines.length = lineClamp;
+    lines[lineClamp - 1] = truncateWithEllipsis(
+      lastLineText,
+      maxWidth,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      ctx,
+      letterSpacing
+    );
+  }
   const segments = [];
   let totalHeight = 0;
   let maxLineWidth = 0;
@@ -491,7 +505,7 @@ function truncateWithEllipsis(text, maxWidth, fontSize, fontFamily, fontWeight,
     letterSpacing
   );
   const availWidth = maxWidth - ellipsisWidth;
-  for (let i = text.length - 1; i > 0; i--) {
+  for (let i = text.length; i > 0; i--) {
     const truncated = text.slice(0, i);
     const w = measureWord(
       truncated,
@@ -738,10 +752,30 @@ async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
   }
 }
 
+// src/jsx/draw/utils.ts
+function parseCSSLength(value, referenceSize) {
+  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
+  return parseFloat(value);
+}
+function toNumber(v) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const n = parseFloat(String(v));
+  return isNaN(n) ? 0 : n;
+}
+function resolveBoxValue(v, referenceWidth) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const s = String(v);
+  if (s.endsWith("%")) return parseFloat(s) / 100 * referenceWidth;
+  const n = parseFloat(s);
+  return isNaN(n) ? 0 : n;
+}
+
 // src/jsx/draw/rect.ts
 function drawRect(ctx, x, y, width, height, style) {
-  const borderRadius = getBorderRadius(style, width, height);
-  const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+  const borderRadius = getBorderRadiusFromStyle(style, width, height);
+  const hasRoundedCorners = hasRadius(borderRadius);
   if (style.boxShadow) {
     drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
   }
@@ -771,7 +805,7 @@ function resolveRadius(v, width, height) {
   if (typeof v === "string") return parseCSSLength(v, Math.min(width, height));
   return toNumber(v);
 }
-function getBorderRadius(style, width, height) {
+function getBorderRadiusFromStyle(style, width, height) {
   return {
     topLeft: resolveRadius(style.borderTopLeftRadius, width, height),
     topRight: resolveRadius(style.borderTopRightRadius, width, height),
@@ -779,11 +813,8 @@ function getBorderRadius(style, width, height) {
     bottomLeft: resolveRadius(style.borderBottomLeftRadius, width, height)
   };
 }
-function getBorderRadiusFromStyle(style, width, height) {
-  return getBorderRadius(style, width, height);
-}
 function drawBorders(ctx, x, y, width, height, style, borderRadius) {
-  const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+  const hasRoundedCorners = hasRadius(borderRadius);
   const tw = resolveBoxValue(style.borderTopWidth, width);
   const rw = resolveBoxValue(style.borderRightWidth, width);
   const bw = resolveBoxValue(style.borderBottomWidth, width);
@@ -1573,25 +1604,22 @@ function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
   const runs = [];
   const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
   let currentText = "";
+  let currentGraphemeCount = 0;
   let currentX = 0;
   let textStartX = 0;
   for (const { segment } of segmenter.segment(text)) {
     if (isEmojiGrapheme(segment)) {
       if (currentText) {
         const textWidth = measureText2(currentText);
-        const graphemeCount = [
-          ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
-            currentText
-          )
-        ].length;
         runs.push({
           kind: "text",
           text: currentText,
           x: textStartX,
-          width: textWidth + letterSpacing * graphemeCount
+          width: textWidth + letterSpacing * currentGraphemeCount
         });
-        currentX = textStartX + textWidth + letterSpacing * graphemeCount;
+        currentX = textStartX + textWidth + letterSpacing * currentGraphemeCount;
         currentText = "";
+        currentGraphemeCount = 0;
       }
       runs.push({
         kind: "emoji",
@@ -1604,20 +1632,16 @@ function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
     } else {
       if (!currentText) textStartX = currentX;
       currentText += segment;
+      currentGraphemeCount++;
     }
   }
   if (currentText) {
     const textWidth = measureText2(currentText);
-    const graphemeCount = [
-      ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
-        currentText
-      )
-    ].length;
     runs.push({
       kind: "text",
       text: currentText,
       x: textStartX,
-      width: textWidth + letterSpacing * graphemeCount
+      width: textWidth + letterSpacing * currentGraphemeCount
     });
   }
   return runs;
@@ -1680,15 +1704,12 @@ async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
   );
   for (const run of runs) {
     if (run.kind === "text") {
+      if (textShadow) {
+        drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+      }
       if (letterSpacing !== 0) {
-        if (textShadow) {
-          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
-        }
         drawTextWithLetterSpacing(ctx, run.text, x + run.x, y, letterSpacing);
       } else {
-        if (textShadow) {
-          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
-        }
         ctx.fillText(run.text, x + run.x, y);
       }
     } else {
@@ -1803,7 +1824,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
       const [offscreen, offCtx] = acquireOffscreen(bufW, bufH);
       offCtx.save();
       offCtx.scale(qx, qy);
-      await drawNodeInner(
+      await drawNodeCore(
         offCtx,
         node,
         parentX,
@@ -1845,182 +1866,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
       return;
     }
   }
-  ctx.save();
-  if (opacity < 1) {
-    ctx.globalAlpha *= opacity;
-  }
-  if (style.filter) {
-    ctx.filter = style.filter;
-  }
-  if (style.transform) {
-    applyTransform(
-      ctx,
-      style.transform,
-      x,
-      y,
-      width,
-      height,
-      style.transformOrigin
-    );
-  }
-  const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
-  if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style, width, height);
-    applyClip(ctx, x, y, width, height, borderRadius);
-  }
-  if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
-    drawRect(ctx, x, y, width, height, style);
-  }
-  if (style.backgroundImage) {
-    const layers = splitGradientArgs(style.backgroundImage);
-    for (let i = layers.length - 1; i >= 0; i--) {
-      const layer = layers[i].trim();
-      const gradient = createGradientFromCSS(ctx, layer, x, y, width, height);
-      if (gradient) {
-        ctx.fillStyle = gradient;
-        const borderRadius = getBorderRadiusFromStyle(style, width, height);
-        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-          ctx.beginPath();
-          roundedRect(
-            ctx,
-            x,
-            y,
-            width,
-            height,
-            borderRadius.topLeft,
-            borderRadius.topRight,
-            borderRadius.bottomRight,
-            borderRadius.bottomLeft
-          );
-          ctx.fill();
-        } else {
-          ctx.fillRect(x, y, width, height);
-        }
-      } else {
-        const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
-        if (urlMatch) {
-          const borderRadius = getBorderRadiusFromStyle(style, width, height);
-          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-          if (hasRadius2) {
-            applyClip(ctx, x, y, width, height, borderRadius);
-          }
-          const image = await loadImage3(urlMatch[1]);
-          const bgSize = style.backgroundSize;
-          if (bgSize === "cover") {
-            const r = computeCover(
-              image.width,
-              image.height,
-              x,
-              y,
-              width,
-              height
-            );
-            ctx.drawImage(
-              image,
-              r.sx,
-              r.sy,
-              r.sw,
-              r.sh,
-              r.dx,
-              r.dy,
-              r.dw,
-              r.dh
-            );
-          } else {
-            let tileW, tileH;
-            if (bgSize === "contain") {
-              const r = computeContain(
-                image.width,
-                image.height,
-                0,
-                0,
-                width,
-                height
-              );
-              tileW = r.dw;
-              tileH = r.dh;
-            } else if (bgSize === "100% 100%") {
-              tileW = width;
-              tileH = height;
-            } else {
-              tileW = image.width;
-              tileH = image.height;
-            }
-            for (let ty = y; ty < y + height; ty += tileH) {
-              for (let tx = x; tx < x + width; tx += tileW) {
-                ctx.drawImage(image, tx, ty, tileW, tileH);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  if (debug) {
-    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x, y, width, height);
-  }
-  if (node.textContent !== void 0 && node.textContent !== "") {
-    const paddingTop = resolveBoxValue(style.paddingTop, width);
-    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
-    const paddingRight = resolveBoxValue(style.paddingRight, width);
-    const borderTopW = resolveBoxValue(style.borderTopWidth, width);
-    const borderLeftW = resolveBoxValue(style.borderLeftWidth, width);
-    const borderRightW = resolveBoxValue(style.borderRightWidth, width);
-    const contentX = x + paddingLeft + borderLeftW;
-    const contentY = y + paddingTop + borderTopW;
-    const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
-    const textLayout = layoutText(
-      node.textContent,
-      style,
-      contentWidth,
-      ctx,
-      !!emojiStyle
-    );
-    await drawText(
-      ctx,
-      textLayout.segments,
-      contentX,
-      contentY,
-      style.textShadow,
-      emojiStyle
-    );
-  }
-  if (node.type === "img" && node.props.src) {
-    const paddingTop = resolveBoxValue(style.paddingTop, width);
-    const paddingLeft = resolveBoxValue(style.paddingLeft, width);
-    const paddingRight = resolveBoxValue(style.paddingRight, width);
-    const paddingBottom = resolveBoxValue(style.paddingBottom, width);
-    const imgX = x + paddingLeft;
-    const imgY = y + paddingTop;
-    const imgW = width - paddingLeft - paddingRight;
-    const imgH = height - paddingTop - paddingBottom;
-    if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style, width, height);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-        applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
-      }
-    }
-    await drawImage(
-      ctx,
-      node.props.src,
-      imgX,
-      imgY,
-      imgW,
-      imgH,
-      style,
-      node.props.__loadedImage
-    );
-  }
-  if (node.type === "svg") {
-    drawSvgContainer(ctx, node, x, y, width, height);
-  } else {
-    for (const child of node.children) {
-      await drawNode(ctx, child, x, y, debug, emojiStyle);
-    }
-  }
-  ctx.restore();
+  await drawNodeCore(ctx, node, parentX, parentY, 0, 0, debug, emojiStyle);
 }
 function extractScale(transform) {
   const scaleMatch = transform.match(/\b(scale|scaleX|scaleY)\(([^)]+)\)/);
@@ -2032,7 +1878,7 @@ function extractScale(transform) {
   const remaining = transform.replace(fullMatch, "").trim();
   return { sx, sy, remaining };
 }
-async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debug, emojiStyle, overrideTransform) {
+async function drawNodeCore(ctx, node, parentX, parentY, offsetX, offsetY, debug, emojiStyle, overrideTransform) {
   const x = parentX + node.x + offsetX;
   const y = parentY + node.y + offsetY;
   const { width, height, style } = node;
@@ -2074,7 +1920,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
       if (gradient) {
         ctx.fillStyle = gradient;
         const borderRadius = getBorderRadiusFromStyle(style, width, height);
-        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+        if (hasRadius(borderRadius)) {
           ctx.beginPath();
           roundedRect(
             ctx,
@@ -2095,8 +1941,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
         const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
         if (urlMatch) {
           const borderRadius = getBorderRadiusFromStyle(style, width, height);
-          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-          if (hasRadius2) {
+          if (hasRadius(borderRadius)) {
             applyClip(ctx, x, y, width, height, borderRadius);
           }
           const image = await loadImage3(urlMatch[1]);
@@ -2193,7 +2038,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
       const borderRadius = getBorderRadiusFromStyle(style, width, height);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+      if (hasRadius(borderRadius)) {
         applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
       }
     }
@@ -2212,15 +2057,25 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     drawSvgContainer(ctx, node, x, y, width, height);
   } else {
     for (const child of node.children) {
-      await drawNodeInner(ctx, child, x, y, 0, 0, debug, emojiStyle, void 0);
+      if (offsetX === 0 && offsetY === 0) {
+        await drawNode(ctx, child, x, y, debug, emojiStyle);
+      } else {
+        await drawNodeCore(
+          ctx,
+          child,
+          x,
+          y,
+          0,
+          0,
+          debug,
+          emojiStyle,
+          void 0
+        );
+      }
     }
   }
   ctx.restore();
 }
-function parseCSSLength(value, referenceSize) {
-  if (value.endsWith("%")) return parseFloat(value) / 100 * referenceSize;
-  return parseFloat(value);
-}
 function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
   let ox = x + width / 2;
   let oy = y + height / 2;
@@ -2285,20 +2140,6 @@ function parseAngle(value) {
   if (value.endsWith("turn")) return parseFloat(value) * 2 * Math.PI;
   return parseFloat(value);
 }
-function toNumber(v) {
-  if (typeof v === "number") return v;
-  if (v === void 0 || v === null) return 0;
-  const n = parseFloat(String(v));
-  return isNaN(n) ? 0 : n;
-}
-function resolveBoxValue(v, referenceWidth) {
-  if (typeof v === "number") return v;
-  if (v === void 0 || v === null) return 0;
-  const s = String(v);
-  if (s.endsWith("%")) return parseFloat(s) / 100 * referenceWidth;
-  const n = parseFloat(s);
-  return isNaN(n) ? 0 : n;
-}
 
 // src/jsx/font.ts
 import { GlobalFonts } from "@napi-rs/canvas";
@@ -2537,6 +2378,7 @@ var INHERITABLE_PROPS = [
   "whiteSpace",
   "wordBreak",
   "textOverflow",
+  "lineClamp",
   "textBoxTrim",
   "textBoxEdge"
 ];
@@ -3195,8 +3037,8 @@ function hasElementChildren(children) {
 // src/jsx/index.ts
 async function renderReactElement(ctx, element, options) {
   ensureFontsRegistered(options.fonts);
-  const width = ctx.canvas.width;
-  const height = ctx.canvas.height;
+  const width = options.width ?? ctx.canvas.width;
+  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(