@shotstack/shotstack-canvas 1.3.0 → 1.3.2

package/dist/entry.node.cjs

@@ -179,29 +179,69 @@ function bufferToArrayBuffer(buffer) {
   }
   return arrayBuffer;
 }
-async function loadWasmNode() {
+var DEFAULT_WASM_URL = "https://shotstack-ingest-api-dev-sources.s3.ap-southeast-2.amazonaws.com/euo5r93oyr/zzz01k9h-yycyx-2x2y6-qx9bj-7n567b/source.wasm";
+async function fetchWasmFromUrl(url) {
+  try {
+    const response = await fetch(url);
+    if (response.ok) {
+      const arrayBuffer = await response.arrayBuffer();
+      const bytes = new Uint8Array(arrayBuffer);
+      if (bytes.length >= 4 && bytes[0] === 0 && bytes[1] === 97 && bytes[2] === 115 && bytes[3] === 109) {
+        console.log(`\u2705 Fetched WASM from URL (${bytes.length} bytes)`);
+        return arrayBuffer;
+      }
+    }
+    return void 0;
+  } catch (err) {
+    console.warn(`Failed to fetch WASM from ${url}:`, err);
+    return void 0;
+  }
+}
+async function loadWasmNode(wasmBaseURL) {
   try {
     const { readFile: readFile2 } = await import("fs/promises");
     const { fileURLToPath } = await import("url");
     const path = await import("path");
+    const { createRequire } = await import("module");
     const currentDir = path.dirname(fileURLToPath(import_meta.url));
+    let harfbuzzWasmPath;
+    try {
+      const require2 = createRequire(import_meta.url);
+      const harfbuzzPkgPath = require2.resolve("harfbuzzjs/package.json");
+      const harfbuzzDir = path.dirname(harfbuzzPkgPath);
+      harfbuzzWasmPath = path.join(harfbuzzDir, "hb.wasm");
+    } catch {
+    }
     const candidates = [
+      // First try the harfbuzzjs package location (resolved via require)
+      ...harfbuzzWasmPath ? [harfbuzzWasmPath] : [],
+      // Lambda environment paths
+      "/var/task/node_modules/harfbuzzjs/hb.wasm",
+      "/var/task/node_modules/@shotstack/shotstack-canvas/assets/wasm/hb.wasm",
+      // Relative paths from current directory
       path.join(currentDir, "../../dist/hb.wasm"),
       path.join(currentDir, "../dist/hb.wasm"),
       path.join(currentDir, "../../assets/wasm/hb.wasm"),
       path.join(currentDir, "../assets/wasm/hb.wasm"),
       path.join(currentDir, "./hb.wasm"),
-      path.join(currentDir, "../hb.wasm")
+      path.join(currentDir, "../hb.wasm"),
+      // node_modules relative paths
+      path.join(currentDir, "../../node_modules/harfbuzzjs/hb.wasm"),
+      path.join(currentDir, "../../../node_modules/harfbuzzjs/hb.wasm"),
+      path.join(currentDir, "../../../../node_modules/harfbuzzjs/hb.wasm")
     ];
     for (const candidate of candidates) {
       try {
         const buffer = await readFile2(candidate);
+        console.log(`\u2705 Found WASM at: ${candidate}`);
         return bufferToArrayBuffer(buffer);
       } catch {
         continue;
       }
     }
-    return void 0;
+    console.log("Local WASM not found, fetching from URL...");
+    const urlToFetch = wasmBaseURL || DEFAULT_WASM_URL;
+    return await fetchWasmFromUrl(urlToFetch);
   } catch {
     return void 0;
   }
@@ -273,7 +313,7 @@ async function initHB(wasmBaseURL) {
   try {
     let wasmBinary;
     if (isNode()) {
-      wasmBinary = await loadWasmNode();
+      wasmBinary = await loadWasmNode(wasmBaseURL);
     } else {
       wasmBinary = await loadWasmWeb(wasmBaseURL);
     }
@@ -1377,11 +1417,27 @@ async function createNodePainter(opts) {
             const c = parseHex6(color, opacity);
             ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
             if (radius && radius > 0) {
+              needsAlphaExtraction = true;
+              ctx.save();
+              ctx.fillStyle = "rgb(255, 255, 255)";
+              ctx.fillRect(0, 0, op.width, op.height);
+              ctx.restore();
+              offscreenCtx.save();
+              offscreenCtx.fillStyle = "rgb(0, 0, 0)";
+              offscreenCtx.fillRect(0, 0, op.width, op.height);
+              offscreenCtx.restore();
               ctx.save();
+              ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
               ctx.beginPath();
               roundRectPath(ctx, 0, 0, op.width, op.height, radius);
               ctx.fill();
               ctx.restore();
+              offscreenCtx.save();
+              offscreenCtx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+              offscreenCtx.beginPath();
+              roundRectPath(offscreenCtx, 0, 0, op.width, op.height, radius);
+              offscreenCtx.fill();
+              offscreenCtx.restore();
             } else {
               ctx.fillRect(0, 0, op.width, op.height);
             }
@@ -2107,9 +2163,10 @@ async function createTextEngine(opts = {}) {
       try {
         const hasBackground = !!asset.background?.color;
         const hasAnimation = !!asset.animation?.preset;
-        const needsAlpha = !hasBackground && hasAnimation;
+        const hasBorderRadius = (asset.background?.borderRadius ?? 0) > 0;
+        const needsAlpha = !hasBackground && hasAnimation || hasBorderRadius;
         console.log(
-          `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, Alpha=${needsAlpha}`
+          `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`
         );
         const finalOptions = {
           width: asset.width ?? width,

package/dist/entry.node.js

@@ -140,29 +140,69 @@ function bufferToArrayBuffer(buffer) {
   }
   return arrayBuffer;
 }
-async function loadWasmNode() {
+var DEFAULT_WASM_URL = "https://shotstack-ingest-api-dev-sources.s3.ap-southeast-2.amazonaws.com/euo5r93oyr/zzz01k9h-yycyx-2x2y6-qx9bj-7n567b/source.wasm";
+async function fetchWasmFromUrl(url) {
+  try {
+    const response = await fetch(url);
+    if (response.ok) {
+      const arrayBuffer = await response.arrayBuffer();
+      const bytes = new Uint8Array(arrayBuffer);
+      if (bytes.length >= 4 && bytes[0] === 0 && bytes[1] === 97 && bytes[2] === 115 && bytes[3] === 109) {
+        console.log(`\u2705 Fetched WASM from URL (${bytes.length} bytes)`);
+        return arrayBuffer;
+      }
+    }
+    return void 0;
+  } catch (err) {
+    console.warn(`Failed to fetch WASM from ${url}:`, err);
+    return void 0;
+  }
+}
+async function loadWasmNode(wasmBaseURL) {
   try {
     const { readFile: readFile2 } = await import("fs/promises");
     const { fileURLToPath } = await import("url");
     const path = await import("path");
+    const { createRequire } = await import("module");
     const currentDir = path.dirname(fileURLToPath(import.meta.url));
+    let harfbuzzWasmPath;
+    try {
+      const require2 = createRequire(import.meta.url);
+      const harfbuzzPkgPath = require2.resolve("harfbuzzjs/package.json");
+      const harfbuzzDir = path.dirname(harfbuzzPkgPath);
+      harfbuzzWasmPath = path.join(harfbuzzDir, "hb.wasm");
+    } catch {
+    }
     const candidates = [
+      // First try the harfbuzzjs package location (resolved via require)
+      ...harfbuzzWasmPath ? [harfbuzzWasmPath] : [],
+      // Lambda environment paths
+      "/var/task/node_modules/harfbuzzjs/hb.wasm",
+      "/var/task/node_modules/@shotstack/shotstack-canvas/assets/wasm/hb.wasm",
+      // Relative paths from current directory
       path.join(currentDir, "../../dist/hb.wasm"),
       path.join(currentDir, "../dist/hb.wasm"),
       path.join(currentDir, "../../assets/wasm/hb.wasm"),
       path.join(currentDir, "../assets/wasm/hb.wasm"),
       path.join(currentDir, "./hb.wasm"),
-      path.join(currentDir, "../hb.wasm")
+      path.join(currentDir, "../hb.wasm"),
+      // node_modules relative paths
+      path.join(currentDir, "../../node_modules/harfbuzzjs/hb.wasm"),
+      path.join(currentDir, "../../../node_modules/harfbuzzjs/hb.wasm"),
+      path.join(currentDir, "../../../../node_modules/harfbuzzjs/hb.wasm")
     ];
     for (const candidate of candidates) {
       try {
         const buffer = await readFile2(candidate);
+        console.log(`\u2705 Found WASM at: ${candidate}`);
         return bufferToArrayBuffer(buffer);
       } catch {
         continue;
       }
     }
-    return void 0;
+    console.log("Local WASM not found, fetching from URL...");
+    const urlToFetch = wasmBaseURL || DEFAULT_WASM_URL;
+    return await fetchWasmFromUrl(urlToFetch);
   } catch {
     return void 0;
   }
@@ -234,7 +274,7 @@ async function initHB(wasmBaseURL) {
   try {
     let wasmBinary;
     if (isNode()) {
-      wasmBinary = await loadWasmNode();
+      wasmBinary = await loadWasmNode(wasmBaseURL);
     } else {
       wasmBinary = await loadWasmWeb(wasmBaseURL);
     }
@@ -1338,11 +1378,27 @@ async function createNodePainter(opts) {
             const c = parseHex6(color, opacity);
             ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
             if (radius && radius > 0) {
+              needsAlphaExtraction = true;
+              ctx.save();
+              ctx.fillStyle = "rgb(255, 255, 255)";
+              ctx.fillRect(0, 0, op.width, op.height);
+              ctx.restore();
+              offscreenCtx.save();
+              offscreenCtx.fillStyle = "rgb(0, 0, 0)";
+              offscreenCtx.fillRect(0, 0, op.width, op.height);
+              offscreenCtx.restore();
               ctx.save();
+              ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
               ctx.beginPath();
               roundRectPath(ctx, 0, 0, op.width, op.height, radius);
               ctx.fill();
               ctx.restore();
+              offscreenCtx.save();
+              offscreenCtx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+              offscreenCtx.beginPath();
+              roundRectPath(offscreenCtx, 0, 0, op.width, op.height, radius);
+              offscreenCtx.fill();
+              offscreenCtx.restore();
             } else {
               ctx.fillRect(0, 0, op.width, op.height);
             }
@@ -2068,9 +2124,10 @@ async function createTextEngine(opts = {}) {
       try {
         const hasBackground = !!asset.background?.color;
         const hasAnimation = !!asset.animation?.preset;
-        const needsAlpha = !hasBackground && hasAnimation;
+        const hasBorderRadius = (asset.background?.borderRadius ?? 0) > 0;
+        const needsAlpha = !hasBackground && hasAnimation || hasBorderRadius;
         console.log(
-          `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, Alpha=${needsAlpha}`
+          `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`
         );
         const finalOptions = {
           width: asset.width ?? width,

package/dist/entry.web.js

@@ -144,29 +144,69 @@ function bufferToArrayBuffer(buffer) {
   }
   return arrayBuffer;
 }
-async function loadWasmNode() {
+var DEFAULT_WASM_URL = "https://shotstack-ingest-api-dev-sources.s3.ap-southeast-2.amazonaws.com/euo5r93oyr/zzz01k9h-yycyx-2x2y6-qx9bj-7n567b/source.wasm";
+async function fetchWasmFromUrl(url) {
+  try {
+    const response = await fetch(url);
+    if (response.ok) {
+      const arrayBuffer = await response.arrayBuffer();
+      const bytes = new Uint8Array(arrayBuffer);
+      if (bytes.length >= 4 && bytes[0] === 0 && bytes[1] === 97 && bytes[2] === 115 && bytes[3] === 109) {
+        console.log(`\u2705 Fetched WASM from URL (${bytes.length} bytes)`);
+        return arrayBuffer;
+      }
+    }
+    return void 0;
+  } catch (err) {
+    console.warn(`Failed to fetch WASM from ${url}:`, err);
+    return void 0;
+  }
+}
+async function loadWasmNode(wasmBaseURL) {
   try {
     const { readFile } = await import("fs/promises");
     const { fileURLToPath } = await import("url");
     const path = await import("path");
+    const { createRequire } = await import("module");
     const currentDir = path.dirname(fileURLToPath(import.meta.url));
+    let harfbuzzWasmPath;
+    try {
+      const require2 = createRequire(import.meta.url);
+      const harfbuzzPkgPath = require2.resolve("harfbuzzjs/package.json");
+      const harfbuzzDir = path.dirname(harfbuzzPkgPath);
+      harfbuzzWasmPath = path.join(harfbuzzDir, "hb.wasm");
+    } catch {
+    }
     const candidates = [
+      // First try the harfbuzzjs package location (resolved via require)
+      ...harfbuzzWasmPath ? [harfbuzzWasmPath] : [],
+      // Lambda environment paths
+      "/var/task/node_modules/harfbuzzjs/hb.wasm",
+      "/var/task/node_modules/@shotstack/shotstack-canvas/assets/wasm/hb.wasm",
+      // Relative paths from current directory
       path.join(currentDir, "../../dist/hb.wasm"),
       path.join(currentDir, "../dist/hb.wasm"),
       path.join(currentDir, "../../assets/wasm/hb.wasm"),
       path.join(currentDir, "../assets/wasm/hb.wasm"),
       path.join(currentDir, "./hb.wasm"),
-      path.join(currentDir, "../hb.wasm")
+      path.join(currentDir, "../hb.wasm"),
+      // node_modules relative paths
+      path.join(currentDir, "../../node_modules/harfbuzzjs/hb.wasm"),
+      path.join(currentDir, "../../../node_modules/harfbuzzjs/hb.wasm"),
+      path.join(currentDir, "../../../../node_modules/harfbuzzjs/hb.wasm")
     ];
     for (const candidate of candidates) {
       try {
         const buffer = await readFile(candidate);
+        console.log(`\u2705 Found WASM at: ${candidate}`);
         return bufferToArrayBuffer(buffer);
       } catch {
         continue;
       }
     }
-    return void 0;
+    console.log("Local WASM not found, fetching from URL...");
+    const urlToFetch = wasmBaseURL || DEFAULT_WASM_URL;
+    return await fetchWasmFromUrl(urlToFetch);
   } catch {
     return void 0;
   }
@@ -238,7 +278,7 @@ async function initHB(wasmBaseURL) {
   try {
     let wasmBinary;
     if (isNode()) {
-      wasmBinary = await loadWasmNode();
+      wasmBinary = await loadWasmNode(wasmBaseURL);
     } else {
       wasmBinary = await loadWasmWeb(wasmBaseURL);
     }
@@ -1332,11 +1372,12 @@ function createWebPainter(canvas) {
             const { color, opacity, radius } = op.bg;
             if (color) {
               const c = parseHex6(color, opacity);
-              ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
               if (radius && radius > 0) {
+                ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
                 drawRoundedRect(ctx, 0, 0, w, h, radius);
                 ctx.fill();
               } else {
+                ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
                 ctx.fillRect(0, 0, w, h);
               }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",