@shotstack/shotstack-canvas 2.1.2 → 2.1.3

package/dist/entry.node.cjs

@@ -1851,8 +1851,8 @@ async function buildDrawOps(p) {
     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 maxRadius = Math.max(0, Math.min(contentWidth - borderWidth2, contentHeight - borderWidth2) / 2);
+    const outerRadius = Math.max(0, Math.min(borderRadius, maxRadius));
     const innerRadius = Math.max(0, outerRadius - halfBorder);
     if (p.background?.color) {
       ops.push({
@@ -3478,9 +3478,14 @@ async function createNodePainter(opts) {
             i++;
           }
           renderToBoth((context) => {
+            const bgSortedOps = [...captionWordOps].sort((a, b) => {
+              const dy = Math.round(a.y) - Math.round(b.y);
+              if (dy !== 0) return dy;
+              return a.x + a.transform.translateX - (b.x + b.transform.translateX);
+            });
             let bgIdx = 0;
-            while (bgIdx < captionWordOps.length) {
-              const wordOp = captionWordOps[bgIdx];
+            while (bgIdx < bgSortedOps.length) {
+              const wordOp = bgSortedOps[bgIdx];
               if (!wordOp.background) {
                 bgIdx++;
                 continue;
@@ -3492,13 +3497,12 @@ async function createNodePainter(opts) {
               }
               const mergeGroup = [wordOp];
               let nextIdx = bgIdx + 1;
-              while (nextIdx < captionWordOps.length) {
-                const nextWord = captionWordOps[nextIdx];
+              while (nextIdx < bgSortedOps.length) {
+                const nextWord = bgSortedOps[nextIdx];
                 if (!nextWord.background) break;
                 const nextDisplay = getVisibleText(nextWord.text, nextWord.visibleCharacters, nextWord.isRTL);
                 if (nextDisplay.length === 0) break;
                 if (Math.round(nextWord.y) !== Math.round(wordOp.y)) break;
-                if (nextWord.background.color !== wordOp.background.color) break;
                 mergeGroup.push(nextWord);
                 nextIdx++;
               }
@@ -3526,11 +3530,13 @@ async function createNodePainter(opts) {
               const bgY = -bgAscent - firstBg.padding;
               const bgW = mergedWidth + firstBg.padding * 2;
               const bgH = bgTextHeight + firstBg.padding * 2;
-              const bgC = parseHex6(firstBg.color, firstBg.opacity);
-              context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
-              context.beginPath();
-              roundRectPath(context, bgX, bgY, bgW, bgH, firstBg.borderRadius);
-              context.fill();
+              if (bgW > 0 && bgH > 0) {
+                const bgC = parseHex6(firstBg.color, firstBg.opacity);
+                context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
+                context.beginPath();
+                roundRectPath(context, bgX, bgY, bgW, bgH, firstBg.borderRadius);
+                context.fill();
+              }
               context.restore();
               bgIdx = nextIdx;
             }
@@ -3827,8 +3833,8 @@ function computePathBounds2(d) {
   };
 }
 function roundRectPath(ctx, x, y, w, h, r) {
-  const maxRadius = Math.min(w, h) / 2;
-  const radius = Math.min(r, maxRadius);
+  const maxRadius = Math.max(0, Math.min(w, h) / 2);
+  const radius = Math.max(0, Math.min(r, maxRadius));
   ctx.moveTo(x + radius, y);
   ctx.arcTo(x + w, y, x + w, y + h, radius);
   ctx.arcTo(x + w, y + h, x, y + h, radius);

package/dist/entry.node.js

@@ -1448,8 +1448,8 @@ async function buildDrawOps(p) {
     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 maxRadius = Math.max(0, Math.min(contentWidth - borderWidth2, contentHeight - borderWidth2) / 2);
+    const outerRadius = Math.max(0, Math.min(borderRadius, maxRadius));
     const innerRadius = Math.max(0, outerRadius - halfBorder);
     if (p.background?.color) {
       ops.push({
@@ -3075,9 +3075,14 @@ async function createNodePainter(opts) {
             i++;
           }
           renderToBoth((context) => {
+            const bgSortedOps = [...captionWordOps].sort((a, b) => {
+              const dy = Math.round(a.y) - Math.round(b.y);
+              if (dy !== 0) return dy;
+              return a.x + a.transform.translateX - (b.x + b.transform.translateX);
+            });
             let bgIdx = 0;
-            while (bgIdx < captionWordOps.length) {
-              const wordOp = captionWordOps[bgIdx];
+            while (bgIdx < bgSortedOps.length) {
+              const wordOp = bgSortedOps[bgIdx];
               if (!wordOp.background) {
                 bgIdx++;
                 continue;
@@ -3089,13 +3094,12 @@ async function createNodePainter(opts) {
               }
               const mergeGroup = [wordOp];
               let nextIdx = bgIdx + 1;
-              while (nextIdx < captionWordOps.length) {
-                const nextWord = captionWordOps[nextIdx];
+              while (nextIdx < bgSortedOps.length) {
+                const nextWord = bgSortedOps[nextIdx];
                 if (!nextWord.background) break;
                 const nextDisplay = getVisibleText(nextWord.text, nextWord.visibleCharacters, nextWord.isRTL);
                 if (nextDisplay.length === 0) break;
                 if (Math.round(nextWord.y) !== Math.round(wordOp.y)) break;
-                if (nextWord.background.color !== wordOp.background.color) break;
                 mergeGroup.push(nextWord);
                 nextIdx++;
               }
@@ -3123,11 +3127,13 @@ async function createNodePainter(opts) {
               const bgY = -bgAscent - firstBg.padding;
               const bgW = mergedWidth + firstBg.padding * 2;
               const bgH = bgTextHeight + firstBg.padding * 2;
-              const bgC = parseHex6(firstBg.color, firstBg.opacity);
-              context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
-              context.beginPath();
-              roundRectPath(context, bgX, bgY, bgW, bgH, firstBg.borderRadius);
-              context.fill();
+              if (bgW > 0 && bgH > 0) {
+                const bgC = parseHex6(firstBg.color, firstBg.opacity);
+                context.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
+                context.beginPath();
+                roundRectPath(context, bgX, bgY, bgW, bgH, firstBg.borderRadius);
+                context.fill();
+              }
               context.restore();
               bgIdx = nextIdx;
             }
@@ -3424,8 +3430,8 @@ function computePathBounds2(d) {
   };
 }
 function roundRectPath(ctx, x, y, w, h, r) {
-  const maxRadius = Math.min(w, h) / 2;
-  const radius = Math.min(r, maxRadius);
+  const maxRadius = Math.max(0, Math.min(w, h) / 2);
+  const radius = Math.max(0, Math.min(r, maxRadius));
   ctx.moveTo(x + radius, y);
   ctx.arcTo(x + w, y, x + w, y + h, radius);
   ctx.arcTo(x + w, y + h, x, y + h, radius);

package/dist/entry.web.js

@@ -33483,8 +33483,8 @@ async function buildDrawOps(p) {
     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 maxRadius = Math.max(0, Math.min(contentWidth - borderWidth2, contentHeight - borderWidth2) / 2);
+    const outerRadius = Math.max(0, Math.min(borderRadius, maxRadius));
     const innerRadius = Math.max(0, outerRadius - halfBorder);
     if (p.background?.color) {
       ops.push({
@@ -34937,8 +34937,8 @@ function createWebPainter(canvas) {
             const y2 = op.y;
             const w = op.width;
             const h = op.height;
-            const maxRadius = Math.min(w, h) / 2;
-            const r = Math.min(op.borderRadius, maxRadius);
+            const maxRadius = Math.max(0, Math.min(w, h) / 2);
+            const r = Math.max(0, Math.min(op.borderRadius, maxRadius));
             p.moveTo(x2 + r, y2);
             p.arcTo(x2 + w, y2, x2 + w, y2 + h, r);
             p.arcTo(x2 + w, y2 + h, x2, y2 + h, r);
@@ -35043,9 +35043,14 @@ function createWebPainter(canvas) {
             captionWordOps.push(nextOp);
             i++;
           }
+          const bgSortedOps = [...captionWordOps].sort((a, b) => {
+            const dy = Math.round(a.y) - Math.round(b.y);
+            if (dy !== 0) return dy;
+            return a.x + a.transform.translateX - (b.x + b.transform.translateX);
+          });
           let bgIdx = 0;
-          while (bgIdx < captionWordOps.length) {
-            const wordOp = captionWordOps[bgIdx];
+          while (bgIdx < bgSortedOps.length) {
+            const wordOp = bgSortedOps[bgIdx];
             if (!wordOp.background) {
               bgIdx++;
               continue;
@@ -35057,13 +35062,12 @@ function createWebPainter(canvas) {
             }
             const mergeGroup = [wordOp];
             let nextIdx = bgIdx + 1;
-            while (nextIdx < captionWordOps.length) {
-              const nextWord = captionWordOps[nextIdx];
+            while (nextIdx < bgSortedOps.length) {
+              const nextWord = bgSortedOps[nextIdx];
               if (!nextWord.background) break;
               const nextDisplay = getVisibleText(nextWord.text, nextWord.visibleCharacters, nextWord.isRTL);
               if (nextDisplay.length === 0) break;
               if (Math.round(nextWord.y) !== Math.round(wordOp.y)) break;
-              if (nextWord.background.color !== wordOp.background.color) break;
               mergeGroup.push(nextWord);
               nextIdx++;
             }
@@ -35091,9 +35095,11 @@ function createWebPainter(canvas) {
             const bgY = -bgAscent - firstBg.padding;
             const bgW = mergedWidth + firstBg.padding * 2;
             const bgH = bgTextHeight + firstBg.padding * 2;
-            const bgC = parseHex6(firstBg.color, firstBg.opacity);
-            ctx.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
-            drawRoundedRect(ctx, bgX, bgY, bgW, bgH, firstBg.borderRadius);
+            if (bgW > 0 && bgH > 0) {
+              const bgC = parseHex6(firstBg.color, firstBg.opacity);
+              ctx.fillStyle = `rgba(${bgC.r},${bgC.g},${bgC.b},${bgC.a})`;
+              drawRoundedRect(ctx, bgX, bgY, bgW, bgH, firstBg.borderRadius);
+            }
             ctx.restore();
             bgIdx = nextIdx;
           }
@@ -35195,8 +35201,8 @@ function createWebPainter(canvas) {
   };
 }
 function drawRoundedRect(ctx, x2, y2, w, h, r) {
-  const maxRadius = Math.min(w, h) / 2;
-  const radius = Math.min(r, maxRadius);
+  const maxRadius = Math.max(0, Math.min(w, h) / 2);
+  const radius = Math.max(0, Math.min(r, maxRadius));
   const p = new Path2D();
   p.moveTo(x2 + radius, y2);
   p.arcTo(x2 + w, y2, x2 + w, y2 + h, radius);

package/package.json

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