@shotstack/shotstack-canvas 1.1.7 → 1.1.9

package/dist/entry.node.d.cts

@@ -204,6 +204,7 @@ interface VideoGenerationOptions {
     duration: number;
     outputPath: string;
     pixelRatio?: number;
+    hasAlpha?: boolean;
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
     tune?: "film" | "animation" | "grain" | "stillimage" | "psnr" | "ssim" | "fastdecode" | "zerolatency";

package/dist/entry.node.d.ts

@@ -204,6 +204,7 @@ interface VideoGenerationOptions {
     duration: number;
     outputPath: string;
     pixelRatio?: number;
+    hasAlpha?: boolean;
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
     tune?: "film" | "animation" | "grain" | "stillimage" | "psnr" | "ssim" | "fastdecode" | "zerolatency";

package/dist/entry.node.js

@@ -1210,6 +1210,7 @@ async function createNodePainter(opts) {
   if (!ctx) throw new Error("2D context unavailable in Node (canvas).");
   const offscreenCanvas = createCanvas(canvas.width, canvas.height);
   const offscreenCtx = offscreenCanvas.getContext("2d");
+  const gradientCache = /* @__PURE__ */ new Map();
   const api = {
     async render(ops) {
       const globalBox = computeGlobalTextBounds(ops);
@@ -1230,6 +1231,7 @@ async function createNodePainter(opts) {
           const hasBackground = !!(op.bg && op.bg.color);
           needsAlphaExtraction = !hasBackground;
           if (op.bg && op.bg.color) {
+            ctx.clearRect(0, 0, op.width, op.height);
             const { color, opacity, radius } = op.bg;
             const c = parseHex6(color, opacity);
             ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
@@ -1243,10 +1245,15 @@ async function createNodePainter(opts) {
               ctx.fillRect(0, 0, op.width, op.height);
             }
           } else {
+            ctx.clearRect(0, 0, op.width, op.height);
+            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();
           }
           continue;
         }
@@ -1265,11 +1272,23 @@ async function createNodePainter(opts) {
             context.translate(fillOp.x, fillOp.y);
             const s = fillOp.scale ?? 1;
             context.scale(s, -s);
-            context.beginPath();
-            drawSvgPathOnCtx(context, fillOp.path);
             const bbox = fillOp.gradientBBox ?? globalBox;
-            const fill = makeGradientFromBBox(context, fillOp.fill, bbox);
+            const localBBox = {
+              x: (bbox.x - fillOp.x) / s,
+              y: -(bbox.y - fillOp.y) / s,
+              w: bbox.w / s,
+              h: bbox.h / s
+            };
+            const cacheKey = JSON.stringify({ fill: fillOp.fill, bbox: localBBox });
+            let fill = gradientCache.get(cacheKey);
+            if (!fill) {
+              fill = makeGradientFromBBox(context, fillOp.fill, localBBox);
+              gradientCache.set(cacheKey, fill);
+              console.log("[Node Painter] Created NEW gradient for local bbox:", localBBox);
+            }
             context.fillStyle = fill;
+            context.beginPath();
+            drawSvgPathOnCtx(context, fillOp.path);
             context.fill();
             context.restore();
           });
@@ -1632,44 +1651,72 @@ var VideoGenerator = class {
       tune = "animation",
       profile = "high",
       level = "4.2",
-      pixFmt = "yuv420p"
+      pixFmt = "yuv420p",
+      hasAlpha = false
     } = options;
     const totalFrames = Math.max(2, Math.round(duration * fps) + 1);
+    const finalOutputPath = hasAlpha ? outputPath.replace(/\.mp4$/, ".mov") : outputPath;
     console.log(
-      `\u{1F3AC} Generating video: ${width}x${height} @ ${fps}fps, ${duration}s (${totalFrames} frames)
-    CRF=${crf}, preset=${preset}, tune=${tune}, profile=${profile}, level=${level}, pix_fmt=${pixFmt}`
+      `\u{1F3AC} Generating video: ${width}x${height} @ ${fps}fps, ${duration}s (${totalFrames} frames)` + (hasAlpha ? " (MOV with alpha)" : "")
     );
     return new Promise(async (resolve, reject) => {
-      const args = [
-        "-y",
-        "-f",
-        "image2pipe",
-        "-vcodec",
-        "png",
-        "-framerate",
-        String(fps),
-        "-i",
-        "-",
-        "-c:v",
-        "libx264",
-        "-preset",
-        preset,
-        "-crf",
-        String(crf),
-        "-tune",
-        tune,
-        "-profile:v",
-        profile,
-        "-level",
-        level,
-        "-pix_fmt",
-        pixFmt,
-        "-r",
-        String(fps),
-        "-movflags",
-        "+faststart",
-        outputPath
-      ];
+      let args;
+      if (hasAlpha) {
+        args = [
+          "-y",
+          "-f",
+          "image2pipe",
+          "-vcodec",
+          "png",
+          "-framerate",
+          String(fps),
+          "-i",
+          "-",
+          "-c:v",
+          "prores_ks",
+          "-profile:v",
+          "4444",
+          "-pix_fmt",
+          "yuva444p10le",
+          "-vendor",
+          "apl0",
+          "-r",
+          String(fps),
+          finalOutputPath
+        ];
+        console.log(`    Output: ${finalOutputPath} (ProRes 4444 with alpha)`);
+      } else {
+        args = [
+          "-y",
+          "-f",
+          "image2pipe",
+          "-vcodec",
+          "png",
+          "-framerate",
+          String(fps),
+          "-i",
+          "-",
+          "-c:v",
+          "libx264",
+          "-preset",
+          preset,
+          "-crf",
+          String(crf),
+          "-tune",
+          tune,
+          "-profile:v",
+          profile,
+          "-level",
+          level,
+          "-pix_fmt",
+          pixFmt,
+          "-r",
+          String(fps),
+          "-movflags",
+          "+faststart",
+          outputPath
+        ];
+      }
       const ffmpeg = spawn(this.ffmpegPath, args, { stdio: ["pipe", "inherit", "pipe"] });
       let ffmpegError = "";
       ffmpeg.stderr.on("data", (data) => {
@@ -1918,13 +1965,21 @@ async function createTextEngine(opts = {}) {
     },
     async generateVideo(asset, options) {
       try {
+        const hasBackground = !!asset.background?.color;
+        const hasAnimation = !!asset.animation?.preset;
+        const needsAlpha = !hasBackground && hasAnimation;
+        console.log(
+          `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, Alpha=${needsAlpha}`
+        );
         const finalOptions = {
           width: asset.width ?? width,
           height: asset.height ?? height,
           fps,
           duration: asset.animation?.duration ?? 3,
           outputPath: options.outputPath ?? "output.mp4",
-          pixelRatio: asset.pixelRatio ?? pixelRatio
+          pixelRatio: asset.pixelRatio ?? pixelRatio,
+          hasAlpha: needsAlpha,
+          ...options
         };
         const frameGenerator = async (time) => {
           return this.renderFrame(asset, time);