@shotstack/shotstack-canvas 2.1.2 → 2.1.4

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({
@@ -2727,7 +2727,8 @@ function calculatePopState(ctx, activeScale, speed) {
     return {
       scale: 0.5,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2735,28 +2736,33 @@ function calculatePopState(ctx, activeScale, speed) {
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
-  const endScale = isWordActive(ctx) ? activeScale : 1;
+  const isActive = isWordActive(ctx);
+  const endScale = isActive ? activeScale : 1;
   const scale = startScale + (endScale - startScale) * easedProgress;
   return {
     scale: Math.min(scale, activeScale),
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateFadeState(ctx, speed) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeInOutQuad(progress);
+  const isActive = isWordActive(ctx);
   return {
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateSlideState(ctx, direction, speed, fontSize) {
@@ -2767,7 +2773,8 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       translateX: offset2.x,
       translateY: offset2.y,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2777,11 +2784,13 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
   const translateY = offset.y * (1 - easedProgress);
+  const isActive = isWordActive(ctx);
   return {
     translateX,
     translateY,
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function getDirectionOffset(direction, distance) {
@@ -2802,17 +2811,20 @@ function calculateBounceState(ctx, speed, fontSize) {
     return {
       translateY: -bounceDistance,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBounce(progress);
+  const isActive = isWordActive(ctx);
   return {
     translateY: -bounceDistance * (1 - easedProgress),
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateTypewriterState(ctx, charCount, speed) {
@@ -2928,20 +2940,30 @@ var WORD_BG_PADDING_RATIO = 0.12;
 function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
+  const hasActiveConfig = asset.active !== void 0;
   const baseColor = font?.color ?? "#ffffff";
-  const explicitActiveColor = active?.color;
-  const animStyle = asset.wordAnimation?.style ?? "highlight";
-  const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
-  const DEFAULT_ACTIVE_COLOR = "#ffff00";
-  const activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+  const baseOpacity = font?.opacity ?? 1;
+  let activeColor;
+  let activeOpacity;
+  if (!hasActiveConfig) {
+    activeColor = baseColor;
+    activeOpacity = baseOpacity;
+  } else {
+    const explicitActiveColor = active?.color;
+    const animStyle = asset.wordAnimation?.style ?? "highlight";
+    const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
+    const DEFAULT_ACTIVE_COLOR = "#ffff00";
+    activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+    activeOpacity = active?.opacity ?? baseOpacity;
+  }
   return {
     family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor,
     activeColor,
-    baseOpacity: font?.opacity ?? 1,
-    activeOpacity: active?.opacity ?? font?.opacity ?? 1,
+    baseOpacity,
+    activeOpacity,
     letterSpacing: asset.style?.letterSpacing ?? 0
   };
 }
@@ -3478,9 +3500,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 +3519,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 +3552,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 +3855,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({
@@ -2324,7 +2324,8 @@ function calculatePopState(ctx, activeScale, speed) {
     return {
       scale: 0.5,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2332,28 +2333,33 @@ function calculatePopState(ctx, activeScale, speed) {
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
-  const endScale = isWordActive(ctx) ? activeScale : 1;
+  const isActive = isWordActive(ctx);
+  const endScale = isActive ? activeScale : 1;
   const scale = startScale + (endScale - startScale) * easedProgress;
   return {
     scale: Math.min(scale, activeScale),
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateFadeState(ctx, speed) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeInOutQuad(progress);
+  const isActive = isWordActive(ctx);
   return {
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateSlideState(ctx, direction, speed, fontSize) {
@@ -2364,7 +2370,8 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       translateX: offset2.x,
       translateY: offset2.y,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -2374,11 +2381,13 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
   const translateY = offset.y * (1 - easedProgress);
+  const isActive = isWordActive(ctx);
   return {
     translateX,
     translateY,
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function getDirectionOffset(direction, distance) {
@@ -2399,17 +2408,20 @@ function calculateBounceState(ctx, speed, fontSize) {
     return {
       translateY: -bounceDistance,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBounce(progress);
+  const isActive = isWordActive(ctx);
   return {
     translateY: -bounceDistance * (1 - easedProgress),
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateTypewriterState(ctx, charCount, speed) {
@@ -2525,20 +2537,30 @@ var WORD_BG_PADDING_RATIO = 0.12;
 function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
+  const hasActiveConfig = asset.active !== void 0;
   const baseColor = font?.color ?? "#ffffff";
-  const explicitActiveColor = active?.color;
-  const animStyle = asset.wordAnimation?.style ?? "highlight";
-  const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
-  const DEFAULT_ACTIVE_COLOR = "#ffff00";
-  const activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+  const baseOpacity = font?.opacity ?? 1;
+  let activeColor;
+  let activeOpacity;
+  if (!hasActiveConfig) {
+    activeColor = baseColor;
+    activeOpacity = baseOpacity;
+  } else {
+    const explicitActiveColor = active?.color;
+    const animStyle = asset.wordAnimation?.style ?? "highlight";
+    const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
+    const DEFAULT_ACTIVE_COLOR = "#ffff00";
+    activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+    activeOpacity = active?.opacity ?? baseOpacity;
+  }
   return {
     family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor,
     activeColor,
-    baseOpacity: font?.opacity ?? 1,
-    activeOpacity: active?.opacity ?? font?.opacity ?? 1,
+    baseOpacity,
+    activeOpacity,
     letterSpacing: asset.style?.letterSpacing ?? 0
   };
 }
@@ -3075,9 +3097,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 +3116,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 +3149,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 +3452,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({
@@ -34359,7 +34359,8 @@ function calculatePopState(ctx, activeScale, speed) {
     return {
       scale: 0.5,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -34367,28 +34368,33 @@ function calculatePopState(ctx, activeScale, speed) {
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBack(progress);
   const startScale = 0.5;
-  const endScale = isWordActive(ctx) ? activeScale : 1;
+  const isActive = isWordActive(ctx);
+  const endScale = isActive ? activeScale : 1;
   const scale = startScale + (endScale - startScale) * easedProgress;
   return {
     scale: Math.min(scale, activeScale),
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateFadeState(ctx, speed) {
   if (ctx.currentTime < ctx.wordStart) {
     return {
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeInOutQuad(progress);
+  const isActive = isWordActive(ctx);
   return {
     opacity: easedProgress,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateSlideState(ctx, direction, speed, fontSize) {
@@ -34399,7 +34405,8 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
       translateX: offset2.x,
       translateY: offset2.y,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
@@ -34409,11 +34416,13 @@ function calculateSlideState(ctx, direction, speed, fontSize) {
   const offset = getDirectionOffset(direction, slideDistance);
   const translateX = offset.x * (1 - easedProgress);
   const translateY = offset.y * (1 - easedProgress);
+  const isActive = isWordActive(ctx);
   return {
     translateX,
     translateY,
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function getDirectionOffset(direction, distance) {
@@ -34434,17 +34443,20 @@ function calculateBounceState(ctx, speed, fontSize) {
     return {
       translateY: -bounceDistance,
       opacity: 0,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const adjustedDuration = ctx.animationDuration / speed;
   const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
   const progress = calculateAnimationProgress(adjustedCtx);
   const easedProgress = easeOutBounce(progress);
+  const isActive = isWordActive(ctx);
   return {
     translateY: -bounceDistance * (1 - easedProgress),
     opacity: easeOutQuad2(progress),
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateTypewriterState(ctx, charCount, speed) {
@@ -34560,20 +34572,30 @@ var WORD_BG_PADDING_RATIO = 0.12;
 function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
+  const hasActiveConfig = asset.active !== void 0;
   const baseColor = font?.color ?? "#ffffff";
-  const explicitActiveColor = active?.color;
-  const animStyle = asset.wordAnimation?.style ?? "highlight";
-  const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
-  const DEFAULT_ACTIVE_COLOR = "#ffff00";
-  const activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+  const baseOpacity = font?.opacity ?? 1;
+  let activeColor;
+  let activeOpacity;
+  if (!hasActiveConfig) {
+    activeColor = baseColor;
+    activeOpacity = baseOpacity;
+  } else {
+    const explicitActiveColor = active?.color;
+    const animStyle = asset.wordAnimation?.style ?? "highlight";
+    const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
+    const DEFAULT_ACTIVE_COLOR = "#ffff00";
+    activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+    activeOpacity = active?.opacity ?? baseOpacity;
+  }
   return {
     family: font?.family ?? "Roboto",
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor,
     activeColor,
-    baseOpacity: font?.opacity ?? 1,
-    activeOpacity: active?.opacity ?? font?.opacity ?? 1,
+    baseOpacity,
+    activeOpacity,
     letterSpacing: asset.style?.letterSpacing ?? 0
   };
 }
@@ -34937,8 +34959,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 +35065,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 +35084,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 +35117,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 +35223,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.4",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",