@shotstack/shotstack-canvas 1.6.1 → 1.6.3

package/dist/entry.node.cjs

@@ -196,13 +196,11 @@ function bufferToArrayBuffer(buffer) {
 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 {
-    console.log(`\u{1F310} Fetching WASM from URL: ${url}`);
     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;
       } else {
         console.error(`\u274C Invalid WASM magic number from URL: ${url}`);
@@ -250,21 +248,17 @@ async function loadWasmNode() {
       "/var/task/node_modules/harfbuzzjs/hb.wasm",
       "/var/task/node_modules/@shotstack/shotstack-canvas/assets/wasm/hb.wasm"
     );
-    console.log(`\u{1F50D} Searching for WASM in ${candidates.length} local paths...`);
     for (const candidate of candidates) {
       try {
         const buffer = await readFile2(candidate);
-        console.log(`\u2705 Found WASM at: ${candidate}`);
         return bufferToArrayBuffer(buffer);
       } catch {
         continue;
       }
     }
-    console.log("\u{1F4C2} Local WASM not found, fetching from URL...");
     return await fetchWasmFromUrl(DEFAULT_WASM_URL);
   } catch (err) {
     console.error("Error in loadWasmNode:", err);
-    console.log("\u26A0\uFE0F Error during local search, falling back to URL...");
     return await fetchWasmFromUrl(DEFAULT_WASM_URL);
   }
 }
@@ -272,13 +266,11 @@ async function loadWasmWeb(wasmBaseURL) {
   try {
     if (wasmBaseURL) {
       const url = wasmBaseURL.endsWith(".wasm") ? wasmBaseURL : wasmBaseURL.endsWith("/") ? `${wasmBaseURL}hb.wasm` : `${wasmBaseURL}/hb.wasm`;
-      console.log(`Fetching WASM from: ${url}`);
       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 Valid WASM binary loaded (${bytes.length} bytes)`);
           return arrayBuffer;
         }
       }
@@ -294,7 +286,6 @@ function setupWasmInterceptors(wasmBinary) {
   window.fetch = function(input, init) {
     const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
     if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
-      console.log(`\u{1F504} Intercepted fetch for: ${url}`);
       return Promise.resolve(
         new Response(wasmBinary.slice(0), {
           status: 200,
@@ -310,13 +301,9 @@ function setupWasmInterceptors(wasmBinary) {
   };
   const originalInstantiate = WebAssembly.instantiate;
   WebAssembly.instantiate = async function(bufferSourceOrModule, importObject) {
-    console.log(
-      `\u{1F504} WebAssembly.instantiate called, type: ${bufferSourceOrModule instanceof WebAssembly.Module ? "Module" : "BufferSource"}`
-    );
     if (bufferSourceOrModule instanceof WebAssembly.Module) {
       return originalInstantiate.call(WebAssembly, bufferSourceOrModule, importObject);
     }
-    console.log(`\u{1F504} Intercepted WebAssembly.instantiate, using pre-loaded WASM binary`);
     const module2 = await WebAssembly.compile(wasmBinary);
     const instance = await originalInstantiate.call(
       WebAssembly,
@@ -332,14 +319,12 @@ function setupWasmInterceptors(wasmBinary) {
         const response = await source;
         const url = response.url || "";
         if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
-          console.log(`\u{1F504} Intercepted instantiateStreaming for: ${url}`);
           const module2 = await WebAssembly.compile(wasmBinary);
           const instance = await WebAssembly.instantiate(module2, importObject);
           return { module: module2, instance };
         }
         return originalInstantiateStreaming.call(WebAssembly, response, importObject);
       } catch (err) {
-        console.log("\u{1F504} instantiateStreaming failed, using pre-loaded binary");
         const module2 = await WebAssembly.compile(wasmBinary);
         const instance = await WebAssembly.instantiate(module2, importObject);
         return { module: module2, instance };
@@ -359,33 +344,25 @@ async function initHB(wasmBaseURL) {
     if (!wasmBinary) {
       throw new Error("Failed to load WASM binary from any source");
     }
-    console.log(`\u2705 WASM binary loaded successfully (${wasmBinary.byteLength} bytes)`);
     if (!isNode()) {
       setupWasmInterceptors(wasmBinary);
       window.Module = {
         wasmBinary,
         locateFile: (path) => {
-          console.log(`\u{1F50D} locateFile called for: ${path}`);
           return path;
         }
       };
-      console.log(`\u{1F30D} Set global Module.wasmBinary (${wasmBinary.byteLength} bytes)`);
     }
-    console.log("\u{1F504} Importing harfbuzzjs/hb.js (factory)");
     const hbModule = await import("harfbuzzjs/hb.js");
     const hbFactory = hbModule.default || hbModule;
-    console.log("\u{1F504} Calling hb factory with wasmBinary");
     const hbInstance = await hbFactory({ wasmBinary });
-    console.log("\u{1F504} Importing harfbuzzjs/hbjs.js (wrapper)");
     const hbjsModule = await import("harfbuzzjs/hbjs.js");
     const hbjsWrapper = hbjsModule.default || hbjsModule;
-    console.log("\u{1F504} Wrapping hb instance");
     const hb = hbjsWrapper(hbInstance);
     if (!hb || typeof hb.createBuffer !== "function" || typeof hb.createFont !== "function") {
       throw new Error("Failed to initialize HarfBuzz: unexpected export shape from 'harfbuzzjs'.");
     }
     hbSingleton = hb;
-    console.log("\u2705 HarfBuzz initialized successfully");
     return hbSingleton;
   } catch (err) {
     console.error("Failed to initialize HarfBuzz:", err);
@@ -896,7 +873,6 @@ async function buildDrawOps(p) {
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
     bg: void 0
-    // Background will be drawn as a separate layer with proper padding/border
   });
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
@@ -1024,7 +1000,12 @@ async function buildDrawOps(p) {
     }
   }
   if (gMinX !== Infinity) {
-    const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
+    const gbox = {
+      x: gMinX,
+      y: gMinY,
+      w: Math.max(1, gMaxX - gMinX),
+      h: Math.max(1, gMaxY - gMinY)
+    };
     for (const op of textOps) {
       if (op.op === "FillPath" && !op.isShadow) {
         op.gradientBBox = gbox;
@@ -1032,14 +1013,16 @@ async function buildDrawOps(p) {
     }
   }
   if (p.background || p.border) {
-    const bgX = 0;
-    const bgY = 0;
-    const bgWidth = p.canvas.width;
-    const bgHeight = p.canvas.height;
+    const contentWidth = p.contentRect?.width ?? p.canvas.width;
+    const contentHeight = p.contentRect?.height ?? p.canvas.height;
     const borderWidth2 = p.border?.width ?? 0;
     const borderRadius = p.border?.radius ?? 0;
     const halfBorder = borderWidth2 / 2;
-    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const canvasCenterX = p.canvas.width / 2;
+    const canvasCenterY = p.canvas.height / 2;
+    const bgX = canvasCenterX - contentWidth / 2;
+    const bgY = canvasCenterY - contentHeight / 2;
+    const maxRadius = Math.min(contentWidth - borderWidth2, contentHeight - borderWidth2) / 2;
     const outerRadius = Math.min(borderRadius, maxRadius);
     const innerRadius = Math.max(0, outerRadius - halfBorder);
     if (p.background?.color) {
@@ -1047,8 +1030,8 @@ async function buildDrawOps(p) {
         op: "Rectangle",
         x: bgX + borderWidth2,
         y: bgY + borderWidth2,
-        width: bgWidth - borderWidth2 * 2,
-        height: bgHeight - borderWidth2 * 2,
+        width: contentWidth - borderWidth2 * 2,
+        height: contentHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
         borderRadius: innerRadius
       });
@@ -1058,8 +1041,8 @@ async function buildDrawOps(p) {
         op: "RectangleStroke",
         x: bgX + halfBorder,
         y: bgY + halfBorder,
-        width: bgWidth - borderWidth2,
-        height: bgHeight - borderWidth2,
+        width: contentWidth - borderWidth2,
+        height: contentHeight - borderWidth2,
         stroke: {
           width: p.border.width,
           color: p.border.color,
@@ -2494,9 +2477,15 @@ async function createTextEngine(opts = {}) {
             emojiAvailable = true;
           } catch {
           }
+          const padding2 = asset.padding ? typeof asset.padding === "number" ? {
+            top: asset.padding,
+            right: asset.padding,
+            bottom: asset.padding,
+            left: asset.padding
+          } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
           lines = await layout.layout({
             text: asset.text,
-            width: asset.width ?? width,
+            width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
@@ -2509,23 +2498,31 @@ async function createTextEngine(opts = {}) {
             `Failed to layout text: ${err instanceof Error ? err.message : String(err)}`
           );
         }
-        const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
+        const padding = asset.padding ? typeof asset.padding === "number" ? {
+          top: asset.padding,
+          right: asset.padding,
+          bottom: asset.padding,
+          left: asset.padding
+        } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasW = (asset.width ?? width) + borderWidth * 2;
+        const canvasH = (asset.height ?? height) + borderWidth * 2;
+        const canvasPR = pixelRatio;
         const textRect = {
           x: 0,
           y: 0,
-          width: asset.width ?? width,
-          height: asset.height ?? height
+          width: (asset.width ?? width) - padding.left - padding.right,
+          height: (asset.height ?? height) - padding.top - padding.bottom
         };
-        const borderWidth = asset.border?.width ?? 0;
-        const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
-        const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
-        const canvasPR = pixelRatio;
+        const contentW = canvasW;
+        const contentH = canvasH;
         let ops0;
         try {
           ops0 = await buildDrawOps({
             canvas: { width: canvasW, height: canvasH, pixelRatio: canvasPR },
             textRect,
             lines,
+            contentRect: { width: contentW, height: contentH },
             font: {
               family: main.family,
               size: main.size,
@@ -2604,9 +2601,12 @@ async function createTextEngine(opts = {}) {
         console.log(
           `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`
         );
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasWidth = (asset.width ?? width) + borderWidth * 2;
+        const canvasHeight = (asset.height ?? height) + borderWidth * 2;
         const finalOptions = {
-          width: asset.width ?? width,
-          height: asset.height ?? height,
+          width: canvasWidth,
+          height: canvasHeight,
           fps,
           duration: options.duration ?? 3,
           outputPath: options.outputPath ?? "output.mp4",

package/dist/entry.node.js

@@ -157,13 +157,11 @@ function bufferToArrayBuffer(buffer) {
 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 {
-    console.log(`\u{1F310} Fetching WASM from URL: ${url}`);
     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;
       } else {
         console.error(`\u274C Invalid WASM magic number from URL: ${url}`);
@@ -211,21 +209,17 @@ async function loadWasmNode() {
       "/var/task/node_modules/harfbuzzjs/hb.wasm",
       "/var/task/node_modules/@shotstack/shotstack-canvas/assets/wasm/hb.wasm"
     );
-    console.log(`\u{1F50D} Searching for WASM in ${candidates.length} local paths...`);
     for (const candidate of candidates) {
       try {
         const buffer = await readFile2(candidate);
-        console.log(`\u2705 Found WASM at: ${candidate}`);
         return bufferToArrayBuffer(buffer);
       } catch {
         continue;
       }
     }
-    console.log("\u{1F4C2} Local WASM not found, fetching from URL...");
     return await fetchWasmFromUrl(DEFAULT_WASM_URL);
   } catch (err) {
     console.error("Error in loadWasmNode:", err);
-    console.log("\u26A0\uFE0F Error during local search, falling back to URL...");
     return await fetchWasmFromUrl(DEFAULT_WASM_URL);
   }
 }
@@ -233,13 +227,11 @@ async function loadWasmWeb(wasmBaseURL) {
   try {
     if (wasmBaseURL) {
       const url = wasmBaseURL.endsWith(".wasm") ? wasmBaseURL : wasmBaseURL.endsWith("/") ? `${wasmBaseURL}hb.wasm` : `${wasmBaseURL}/hb.wasm`;
-      console.log(`Fetching WASM from: ${url}`);
       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 Valid WASM binary loaded (${bytes.length} bytes)`);
           return arrayBuffer;
         }
       }
@@ -255,7 +247,6 @@ function setupWasmInterceptors(wasmBinary) {
   window.fetch = function(input, init) {
     const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
     if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
-      console.log(`\u{1F504} Intercepted fetch for: ${url}`);
       return Promise.resolve(
         new Response(wasmBinary.slice(0), {
           status: 200,
@@ -271,13 +262,9 @@ function setupWasmInterceptors(wasmBinary) {
   };
   const originalInstantiate = WebAssembly.instantiate;
   WebAssembly.instantiate = async function(bufferSourceOrModule, importObject) {
-    console.log(
-      `\u{1F504} WebAssembly.instantiate called, type: ${bufferSourceOrModule instanceof WebAssembly.Module ? "Module" : "BufferSource"}`
-    );
     if (bufferSourceOrModule instanceof WebAssembly.Module) {
       return originalInstantiate.call(WebAssembly, bufferSourceOrModule, importObject);
     }
-    console.log(`\u{1F504} Intercepted WebAssembly.instantiate, using pre-loaded WASM binary`);
     const module = await WebAssembly.compile(wasmBinary);
     const instance = await originalInstantiate.call(
       WebAssembly,
@@ -293,14 +280,12 @@ function setupWasmInterceptors(wasmBinary) {
         const response = await source;
         const url = response.url || "";
         if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
-          console.log(`\u{1F504} Intercepted instantiateStreaming for: ${url}`);
           const module = await WebAssembly.compile(wasmBinary);
           const instance = await WebAssembly.instantiate(module, importObject);
           return { module, instance };
         }
         return originalInstantiateStreaming.call(WebAssembly, response, importObject);
       } catch (err) {
-        console.log("\u{1F504} instantiateStreaming failed, using pre-loaded binary");
         const module = await WebAssembly.compile(wasmBinary);
         const instance = await WebAssembly.instantiate(module, importObject);
         return { module, instance };
@@ -320,33 +305,25 @@ async function initHB(wasmBaseURL) {
     if (!wasmBinary) {
       throw new Error("Failed to load WASM binary from any source");
     }
-    console.log(`\u2705 WASM binary loaded successfully (${wasmBinary.byteLength} bytes)`);
     if (!isNode()) {
       setupWasmInterceptors(wasmBinary);
       window.Module = {
         wasmBinary,
         locateFile: (path) => {
-          console.log(`\u{1F50D} locateFile called for: ${path}`);
           return path;
         }
       };
-      console.log(`\u{1F30D} Set global Module.wasmBinary (${wasmBinary.byteLength} bytes)`);
     }
-    console.log("\u{1F504} Importing harfbuzzjs/hb.js (factory)");
     const hbModule = await import("harfbuzzjs/hb.js");
     const hbFactory = hbModule.default || hbModule;
-    console.log("\u{1F504} Calling hb factory with wasmBinary");
     const hbInstance = await hbFactory({ wasmBinary });
-    console.log("\u{1F504} Importing harfbuzzjs/hbjs.js (wrapper)");
     const hbjsModule = await import("harfbuzzjs/hbjs.js");
     const hbjsWrapper = hbjsModule.default || hbjsModule;
-    console.log("\u{1F504} Wrapping hb instance");
     const hb = hbjsWrapper(hbInstance);
     if (!hb || typeof hb.createBuffer !== "function" || typeof hb.createFont !== "function") {
       throw new Error("Failed to initialize HarfBuzz: unexpected export shape from 'harfbuzzjs'.");
     }
     hbSingleton = hb;
-    console.log("\u2705 HarfBuzz initialized successfully");
     return hbSingleton;
   } catch (err) {
     console.error("Failed to initialize HarfBuzz:", err);
@@ -857,7 +834,6 @@ async function buildDrawOps(p) {
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
     bg: void 0
-    // Background will be drawn as a separate layer with proper padding/border
   });
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
@@ -985,7 +961,12 @@ async function buildDrawOps(p) {
     }
   }
   if (gMinX !== Infinity) {
-    const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
+    const gbox = {
+      x: gMinX,
+      y: gMinY,
+      w: Math.max(1, gMaxX - gMinX),
+      h: Math.max(1, gMaxY - gMinY)
+    };
     for (const op of textOps) {
       if (op.op === "FillPath" && !op.isShadow) {
         op.gradientBBox = gbox;
@@ -993,14 +974,16 @@ async function buildDrawOps(p) {
     }
   }
   if (p.background || p.border) {
-    const bgX = 0;
-    const bgY = 0;
-    const bgWidth = p.canvas.width;
-    const bgHeight = p.canvas.height;
+    const contentWidth = p.contentRect?.width ?? p.canvas.width;
+    const contentHeight = p.contentRect?.height ?? p.canvas.height;
     const borderWidth2 = p.border?.width ?? 0;
     const borderRadius = p.border?.radius ?? 0;
     const halfBorder = borderWidth2 / 2;
-    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const canvasCenterX = p.canvas.width / 2;
+    const canvasCenterY = p.canvas.height / 2;
+    const bgX = canvasCenterX - contentWidth / 2;
+    const bgY = canvasCenterY - contentHeight / 2;
+    const maxRadius = Math.min(contentWidth - borderWidth2, contentHeight - borderWidth2) / 2;
     const outerRadius = Math.min(borderRadius, maxRadius);
     const innerRadius = Math.max(0, outerRadius - halfBorder);
     if (p.background?.color) {
@@ -1008,8 +991,8 @@ async function buildDrawOps(p) {
         op: "Rectangle",
         x: bgX + borderWidth2,
         y: bgY + borderWidth2,
-        width: bgWidth - borderWidth2 * 2,
-        height: bgHeight - borderWidth2 * 2,
+        width: contentWidth - borderWidth2 * 2,
+        height: contentHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
         borderRadius: innerRadius
       });
@@ -1019,8 +1002,8 @@ async function buildDrawOps(p) {
         op: "RectangleStroke",
         x: bgX + halfBorder,
         y: bgY + halfBorder,
-        width: bgWidth - borderWidth2,
-        height: bgHeight - borderWidth2,
+        width: contentWidth - borderWidth2,
+        height: contentHeight - borderWidth2,
         stroke: {
           width: p.border.width,
           color: p.border.color,
@@ -2455,9 +2438,15 @@ async function createTextEngine(opts = {}) {
             emojiAvailable = true;
           } catch {
           }
+          const padding2 = asset.padding ? typeof asset.padding === "number" ? {
+            top: asset.padding,
+            right: asset.padding,
+            bottom: asset.padding,
+            left: asset.padding
+          } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
           lines = await layout.layout({
             text: asset.text,
-            width: asset.width ?? width,
+            width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
@@ -2470,23 +2459,31 @@ async function createTextEngine(opts = {}) {
             `Failed to layout text: ${err instanceof Error ? err.message : String(err)}`
           );
         }
-        const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
+        const padding = asset.padding ? typeof asset.padding === "number" ? {
+          top: asset.padding,
+          right: asset.padding,
+          bottom: asset.padding,
+          left: asset.padding
+        } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasW = (asset.width ?? width) + borderWidth * 2;
+        const canvasH = (asset.height ?? height) + borderWidth * 2;
+        const canvasPR = pixelRatio;
         const textRect = {
           x: 0,
           y: 0,
-          width: asset.width ?? width,
-          height: asset.height ?? height
+          width: (asset.width ?? width) - padding.left - padding.right,
+          height: (asset.height ?? height) - padding.top - padding.bottom
         };
-        const borderWidth = asset.border?.width ?? 0;
-        const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
-        const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
-        const canvasPR = pixelRatio;
+        const contentW = canvasW;
+        const contentH = canvasH;
         let ops0;
         try {
           ops0 = await buildDrawOps({
             canvas: { width: canvasW, height: canvasH, pixelRatio: canvasPR },
             textRect,
             lines,
+            contentRect: { width: contentW, height: contentH },
             font: {
               family: main.family,
               size: main.size,
@@ -2565,9 +2562,12 @@ async function createTextEngine(opts = {}) {
         console.log(
           `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`
         );
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasWidth = (asset.width ?? width) + borderWidth * 2;
+        const canvasHeight = (asset.height ?? height) + borderWidth * 2;
         const finalOptions = {
-          width: asset.width ?? width,
-          height: asset.height ?? height,
+          width: canvasWidth,
+          height: canvasHeight,
           fps,
           duration: options.duration ?? 3,
           outputPath: options.outputPath ?? "output.mp4",

package/dist/entry.web.js

@@ -161,13 +161,11 @@ function bufferToArrayBuffer(buffer) {
 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 {
-    console.log(`\u{1F310} Fetching WASM from URL: ${url}`);
     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;
       } else {
         console.error(`\u274C Invalid WASM magic number from URL: ${url}`);
@@ -215,21 +213,17 @@ async function loadWasmNode() {
       "/var/task/node_modules/harfbuzzjs/hb.wasm",
       "/var/task/node_modules/@shotstack/shotstack-canvas/assets/wasm/hb.wasm"
     );
-    console.log(`\u{1F50D} Searching for WASM in ${candidates.length} local paths...`);
     for (const candidate of candidates) {
       try {
         const buffer = await readFile(candidate);
-        console.log(`\u2705 Found WASM at: ${candidate}`);
         return bufferToArrayBuffer(buffer);
       } catch {
         continue;
       }
     }
-    console.log("\u{1F4C2} Local WASM not found, fetching from URL...");
     return await fetchWasmFromUrl(DEFAULT_WASM_URL);
   } catch (err) {
     console.error("Error in loadWasmNode:", err);
-    console.log("\u26A0\uFE0F Error during local search, falling back to URL...");
     return await fetchWasmFromUrl(DEFAULT_WASM_URL);
   }
 }
@@ -237,13 +231,11 @@ async function loadWasmWeb(wasmBaseURL) {
   try {
     if (wasmBaseURL) {
       const url = wasmBaseURL.endsWith(".wasm") ? wasmBaseURL : wasmBaseURL.endsWith("/") ? `${wasmBaseURL}hb.wasm` : `${wasmBaseURL}/hb.wasm`;
-      console.log(`Fetching WASM from: ${url}`);
       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 Valid WASM binary loaded (${bytes.length} bytes)`);
           return arrayBuffer;
         }
       }
@@ -259,7 +251,6 @@ function setupWasmInterceptors(wasmBinary) {
   window.fetch = function(input, init) {
     const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
     if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
-      console.log(`\u{1F504} Intercepted fetch for: ${url}`);
       return Promise.resolve(
         new Response(wasmBinary.slice(0), {
           status: 200,
@@ -275,13 +266,9 @@ function setupWasmInterceptors(wasmBinary) {
   };
   const originalInstantiate = WebAssembly.instantiate;
   WebAssembly.instantiate = async function(bufferSourceOrModule, importObject) {
-    console.log(
-      `\u{1F504} WebAssembly.instantiate called, type: ${bufferSourceOrModule instanceof WebAssembly.Module ? "Module" : "BufferSource"}`
-    );
     if (bufferSourceOrModule instanceof WebAssembly.Module) {
       return originalInstantiate.call(WebAssembly, bufferSourceOrModule, importObject);
     }
-    console.log(`\u{1F504} Intercepted WebAssembly.instantiate, using pre-loaded WASM binary`);
     const module = await WebAssembly.compile(wasmBinary);
     const instance = await originalInstantiate.call(
       WebAssembly,
@@ -297,14 +284,12 @@ function setupWasmInterceptors(wasmBinary) {
         const response = await source;
         const url = response.url || "";
         if (url.includes("hb.wasm") || url.endsWith(".wasm") && !url.includes("source.wasm")) {
-          console.log(`\u{1F504} Intercepted instantiateStreaming for: ${url}`);
           const module = await WebAssembly.compile(wasmBinary);
           const instance = await WebAssembly.instantiate(module, importObject);
           return { module, instance };
         }
         return originalInstantiateStreaming.call(WebAssembly, response, importObject);
       } catch (err) {
-        console.log("\u{1F504} instantiateStreaming failed, using pre-loaded binary");
         const module = await WebAssembly.compile(wasmBinary);
         const instance = await WebAssembly.instantiate(module, importObject);
         return { module, instance };
@@ -324,33 +309,25 @@ async function initHB(wasmBaseURL) {
     if (!wasmBinary) {
       throw new Error("Failed to load WASM binary from any source");
     }
-    console.log(`\u2705 WASM binary loaded successfully (${wasmBinary.byteLength} bytes)`);
     if (!isNode()) {
       setupWasmInterceptors(wasmBinary);
       window.Module = {
         wasmBinary,
         locateFile: (path) => {
-          console.log(`\u{1F50D} locateFile called for: ${path}`);
           return path;
         }
       };
-      console.log(`\u{1F30D} Set global Module.wasmBinary (${wasmBinary.byteLength} bytes)`);
     }
-    console.log("\u{1F504} Importing harfbuzzjs/hb.js (factory)");
     const hbModule = await import("./hb-ODWKSLMB.js");
     const hbFactory = hbModule.default || hbModule;
-    console.log("\u{1F504} Calling hb factory with wasmBinary");
     const hbInstance = await hbFactory({ wasmBinary });
-    console.log("\u{1F504} Importing harfbuzzjs/hbjs.js (wrapper)");
     const hbjsModule = await import("./hbjs-HHU2TAW7.js");
     const hbjsWrapper = hbjsModule.default || hbjsModule;
-    console.log("\u{1F504} Wrapping hb instance");
     const hb = hbjsWrapper(hbInstance);
     if (!hb || typeof hb.createBuffer !== "function" || typeof hb.createFont !== "function") {
       throw new Error("Failed to initialize HarfBuzz: unexpected export shape from 'harfbuzzjs'.");
     }
     hbSingleton = hb;
-    console.log("\u2705 HarfBuzz initialized successfully");
     return hbSingleton;
   } catch (err) {
     console.error("Failed to initialize HarfBuzz:", err);
@@ -862,7 +839,6 @@ async function buildDrawOps(p) {
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
     bg: void 0
-    // Background will be drawn as a separate layer with proper padding/border
   });
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
@@ -990,7 +966,12 @@ async function buildDrawOps(p) {
     }
   }
   if (gMinX !== Infinity) {
-    const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
+    const gbox = {
+      x: gMinX,
+      y: gMinY,
+      w: Math.max(1, gMaxX - gMinX),
+      h: Math.max(1, gMaxY - gMinY)
+    };
     for (const op of textOps) {
       if (op.op === "FillPath" && !op.isShadow) {
         op.gradientBBox = gbox;
@@ -998,14 +979,16 @@ async function buildDrawOps(p) {
     }
   }
   if (p.background || p.border) {
-    const bgX = 0;
-    const bgY = 0;
-    const bgWidth = p.canvas.width;
-    const bgHeight = p.canvas.height;
+    const contentWidth = p.contentRect?.width ?? p.canvas.width;
+    const contentHeight = p.contentRect?.height ?? p.canvas.height;
     const borderWidth2 = p.border?.width ?? 0;
     const borderRadius = p.border?.radius ?? 0;
     const halfBorder = borderWidth2 / 2;
-    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const canvasCenterX = p.canvas.width / 2;
+    const canvasCenterY = p.canvas.height / 2;
+    const bgX = canvasCenterX - contentWidth / 2;
+    const bgY = canvasCenterY - contentHeight / 2;
+    const maxRadius = Math.min(contentWidth - borderWidth2, contentHeight - borderWidth2) / 2;
     const outerRadius = Math.min(borderRadius, maxRadius);
     const innerRadius = Math.max(0, outerRadius - halfBorder);
     if (p.background?.color) {
@@ -1013,8 +996,8 @@ async function buildDrawOps(p) {
         op: "Rectangle",
         x: bgX + borderWidth2,
         y: bgY + borderWidth2,
-        width: bgWidth - borderWidth2 * 2,
-        height: bgHeight - borderWidth2 * 2,
+        width: contentWidth - borderWidth2 * 2,
+        height: contentHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
         borderRadius: innerRadius
       });
@@ -1024,8 +1007,8 @@ async function buildDrawOps(p) {
         op: "RectangleStroke",
         x: bgX + halfBorder,
         y: bgY + halfBorder,
-        width: bgWidth - borderWidth2,
-        height: bgHeight - borderWidth2,
+        width: contentWidth - borderWidth2,
+        height: contentHeight - borderWidth2,
         stroke: {
           width: p.border.width,
           color: p.border.color,
@@ -2166,9 +2149,10 @@ async function createTextEngine(opts = {}) {
             emojiAvailable = true;
           } catch {
           }
+          const padding2 = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
           lines = await layout.layout({
             text: asset.text,
-            width: asset.width ?? width,
+            width: (asset.width ?? width) - padding2.left - padding2.right,
             letterSpacing: asset.style?.letterSpacing ?? 0,
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
@@ -2182,22 +2166,25 @@ async function createTextEngine(opts = {}) {
           );
         }
         const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasW = (asset.width ?? width) + borderWidth * 2;
+        const canvasH = (asset.height ?? height) + borderWidth * 2;
+        const canvasPR = pixelRatio;
         const textRect = {
           x: 0,
           y: 0,
-          width: asset.width ?? width,
-          height: asset.height ?? height
+          width: (asset.width ?? width) - padding.left - padding.right,
+          height: (asset.height ?? height) - padding.top - padding.bottom
         };
-        const borderWidth = asset.border?.width ?? 0;
-        const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
-        const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
-        const canvasPR = pixelRatio;
+        const contentW = canvasW;
+        const contentH = canvasH;
         let ops0;
         try {
           ops0 = await buildDrawOps({
             canvas: { width: canvasW, height: canvasH, pixelRatio: canvasPR },
             textRect,
             lines,
+            contentRect: { width: contentW, height: contentH },
             font: {
               family: main.family,
               size: main.size,

package/package.json

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