@effing/canvas 0.22.1 → 0.22.2

package/dist/index.d.ts

@@ -93,7 +93,7 @@ type RenderReactElementOptions = {
  *
  * await renderReactElement(ctx, <MyComponent />, { fonts: [myFont] });
  *
- * const png = canvas.encodeSync("png");
+ * const png = await canvas.encode("png");
  * ```
  *
  * @example HiDPI rendering (2x)

package/dist/index.js

@@ -764,8 +764,7 @@ function acquireOffscreen(w, h) {
       const canvas2 = ref.deref();
       if (canvas2) {
         const ctx = canvas2.getContext("2d");
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
-        ctx.clearRect(0, 0, w, h);
+        ctx.reset();
         return [canvas2, ctx];
       }
     }
@@ -1618,9 +1617,11 @@ function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0,
   if (type === "defs" || type === "clipPath" || type === "mask" || type === "filter")
     return;
   const transform = type !== "g" ? props.transform : void 0;
-  if (transform) {
+  const opacity = type !== "g" ? Number(props.opacity ?? 1) : 1;
+  if (transform || opacity < 1) {
     ctx.save();
-    applySvgTransform(ctx, transform);
+    if (transform) applySvgTransform(ctx, transform);
+    if (opacity < 1) ctx.globalAlpha *= opacity;
   }
   const clipRef = parseUrlRef(props.clipPath ?? props["clip-path"]);
   const clipShapes = clipRef ? defs.clips.get(clipRef) : void 0;
@@ -1701,7 +1702,7 @@ function drawSvgChild(ctx, child, inherited, color, defs = EMPTY_DEFS, vbW = 0,
     releaseOffscreen(elemCanvas);
   }
   if (clipPath) ctx.restore();
-  if (transform) ctx.restore();
+  if (transform || opacity < 1) ctx.restore();
 }
 function drawPath(ctx, props, inherited, color, defs) {
   const d = props.d;
@@ -1869,17 +1870,19 @@ function drawGroup(ctx, node, inherited, color, defs = EMPTY_DEFS, vbW = 0, vbH
     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) {
+  if (transform || opacity < 1) {
     ctx.save();
-    applySvgTransform(ctx, transform);
+    if (transform) applySvgTransform(ctx, transform);
+    if (opacity < 1) ctx.globalAlpha *= opacity;
   }
   for (const child of children) {
     if (child != null && typeof child === "object") {
       drawSvgChild(ctx, child, groupInherited, color, defs, vbW, vbH);
     }
   }
-  if (transform) {
+  if (transform || opacity < 1) {
     ctx.restore();
   }
 }
@@ -3219,11 +3222,21 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   if (tagName === "svg") {
     if (props.width != null && style.width === void 0) {
       const v = props.width;
-      style.width = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+      if (typeof v === "string") {
+        const resolved = resolveUnit(v, viewportWidth, viewportHeight, 16, 16);
+        style.width = typeof resolved === "string" && resolved.endsWith("%") ? resolved : Number(resolved);
+      } else {
+        style.width = Number(v);
+      }
     }
     if (props.height != null && style.height === void 0) {
       const v = props.height;
-      style.height = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+      if (typeof v === "string") {
+        const resolved = resolveUnit(v, viewportWidth, viewportHeight, 16, 16);
+        style.height = typeof resolved === "string" && resolved.endsWith("%") ? resolved : Number(resolved);
+      } else {
+        style.height = Number(v);
+      }
     }
     const viewBox = props.viewBox;
     if (viewBox) {