@shotstack/shotstack-canvas 1.1.4 → 1.1.6

package/dist/entry.node.cjs

@@ -1192,84 +1192,141 @@ async function createNodePainter(opts) {
   );
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("2D context unavailable in Node (canvas).");
+  const offscreenCanvas = createCanvas(canvas.width, canvas.height);
+  const offscreenCtx = offscreenCanvas.getContext("2d");
   const api = {
     async render(ops) {
       const globalBox = computeGlobalTextBounds(ops);
+      let needsAlphaExtraction = false;
       for (const op of ops) {
         if (op.op === "BeginFrame") {
-          if (op.clear) ctx.clearRect(0, 0, op.width, op.height);
           const dpr = op.pixelRatio ?? opts.pixelRatio;
           const wantW = Math.floor(op.width * dpr);
           const wantH = Math.floor(op.height * dpr);
           if (canvas.width !== wantW || canvas.height !== wantH) {
             canvas.width = wantW;
             canvas.height = wantH;
+            offscreenCanvas.width = wantW;
+            offscreenCanvas.height = wantH;
           }
           ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          offscreenCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          const hasBackground = !!(op.bg && op.bg.color);
+          needsAlphaExtraction = !hasBackground;
           if (op.bg && op.bg.color) {
             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.save();
-                ctx.beginPath();
-                roundRectPath(ctx, 0, 0, op.width, op.height, radius);
-                ctx.fill();
-                ctx.restore();
-              } else {
-                ctx.fillRect(0, 0, op.width, op.height);
-              }
+            const c = parseHex6(color, opacity);
+            ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            if (radius && radius > 0) {
+              ctx.save();
+              ctx.beginPath();
+              roundRectPath(ctx, 0, 0, op.width, op.height, radius);
+              ctx.fill();
+              ctx.restore();
+            } else {
+              ctx.fillRect(0, 0, op.width, op.height);
             }
+          } else {
+            ctx.fillStyle = "rgb(255, 255, 255)";
+            ctx.fillRect(0, 0, op.width, op.height);
+            offscreenCtx.fillStyle = "rgb(0, 0, 0)";
+            offscreenCtx.fillRect(0, 0, op.width, op.height);
           }
           continue;
         }
+        const renderToBoth = (renderFn) => {
+          if (needsAlphaExtraction) {
+            renderFn(ctx);
+            renderFn(offscreenCtx);
+          } else {
+            renderFn(ctx);
+          }
+        };
         if (op.op === "FillPath") {
           const fillOp = op;
-          ctx.save();
-          ctx.translate(fillOp.x, fillOp.y);
-          const s = fillOp.scale ?? 1;
-          ctx.scale(s, -s);
-          ctx.beginPath();
-          drawSvgPathOnCtx(ctx, fillOp.path);
-          const bbox = fillOp.gradientBBox ?? globalBox;
-          const fill = makeGradientFromBBox(ctx, fillOp.fill, bbox);
-          ctx.fillStyle = fill;
-          ctx.fill();
-          ctx.restore();
+          renderToBoth((context) => {
+            context.save();
+            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);
+            context.fillStyle = fill;
+            context.fill();
+            context.restore();
+          });
           continue;
         }
         if (op.op === "StrokePath") {
           const strokeOp = op;
-          ctx.save();
-          ctx.translate(strokeOp.x, strokeOp.y);
-          const s = strokeOp.scale ?? 1;
-          ctx.scale(s, -s);
-          const invAbs = 1 / Math.abs(s);
-          ctx.beginPath();
-          drawSvgPathOnCtx(ctx, strokeOp.path);
-          const c = parseHex6(strokeOp.color, strokeOp.opacity);
-          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-          ctx.lineWidth = strokeOp.width * invAbs;
-          ctx.lineJoin = "round";
-          ctx.lineCap = "round";
-          ctx.stroke();
-          ctx.restore();
+          renderToBoth((context) => {
+            context.save();
+            context.translate(strokeOp.x, strokeOp.y);
+            const s = strokeOp.scale ?? 1;
+            context.scale(s, -s);
+            const invAbs = 1 / Math.abs(s);
+            context.beginPath();
+            drawSvgPathOnCtx(context, strokeOp.path);
+            const c = parseHex6(strokeOp.color, strokeOp.opacity);
+            context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            context.lineWidth = strokeOp.width * invAbs;
+            context.lineJoin = "round";
+            context.lineCap = "round";
+            context.stroke();
+            context.restore();
+          });
           continue;
         }
         if (op.op === "DecorationLine") {
-          ctx.save();
-          const c = parseHex6(op.color, op.opacity);
-          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
-          ctx.lineWidth = op.width;
-          ctx.beginPath();
-          ctx.moveTo(op.from.x, op.from.y);
-          ctx.lineTo(op.to.x, op.to.y);
-          ctx.stroke();
-          ctx.restore();
+          renderToBoth((context) => {
+            context.save();
+            const c = parseHex6(op.color, op.opacity);
+            context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            context.lineWidth = op.width;
+            context.beginPath();
+            context.moveTo(op.from.x, op.from.y);
+            context.lineTo(op.to.x, op.to.y);
+            context.stroke();
+            context.restore();
+          });
           continue;
         }
       }
+      if (needsAlphaExtraction) {
+        const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const blackData = offscreenCtx.getImageData(0, 0, canvas.width, canvas.height);
+        const white = whiteData.data;
+        const black = blackData.data;
+        for (let i = 0; i < white.length; i += 4) {
+          const wr = white[i];
+          const wg = white[i + 1];
+          const wb = white[i + 2];
+          const br = black[i];
+          const bg = black[i + 1];
+          const bb = black[i + 2];
+          const alpha = 255 - Math.max(wr - br, wg - bg, wb - bb);
+          if (alpha <= 2) {
+            white[i] = 0;
+            white[i + 1] = 0;
+            white[i + 2] = 0;
+            white[i + 3] = 0;
+          } else if (alpha >= 253) {
+            white[i] = br;
+            white[i + 1] = bg;
+            white[i + 2] = bb;
+            white[i + 3] = 255;
+          } else {
+            const alphaFactor = 255 / alpha;
+            white[i] = Math.min(255, Math.max(0, Math.round(br * alphaFactor)));
+            white[i + 1] = Math.min(255, Math.max(0, Math.round(bg * alphaFactor)));
+            white[i + 2] = Math.min(255, Math.max(0, Math.round(bb * alphaFactor)));
+            white[i + 3] = alpha;
+          }
+        }
+        ctx.putImageData(whiteData, 0, 0);
+      }
     },
     async toPNG() {
       return canvas.toBuffer("image/png");