@shotstack/shotstack-canvas 2.1.1 → 2.1.2

package/dist/entry.node.cjs

@@ -2842,10 +2842,11 @@ function calculateTypewriterState(ctx, charCount, speed) {
     isActive: isWordActive(ctx)
   };
 }
-function calculateNoneState(ctx) {
+function calculateNoneState(_ctx) {
   return {
     opacity: 1,
-    isActive: isWordActive(ctx)
+    isActive: false,
+    fillProgress: 0
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
@@ -2888,7 +2889,7 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, ac
       break;
   }
   const mergedState = { ...baseState, ...partialState };
-  if (mergedState.isActive && activeScale !== 1 && config.style !== "pop") {
+  if (mergedState.isActive && activeScale !== 1 && config.style !== "pop" && config.style !== "none") {
     mergedState.scale = activeScale;
   }
   return mergedState;
@@ -2950,7 +2951,10 @@ function extractStrokeConfig(asset, isActive) {
   if (!baseStroke && !activeStroke) {
     return void 0;
   }
-  if (isActive && activeStroke) {
+  if (isActive) {
+    if (!activeStroke) {
+      return void 0;
+    }
     return {
       width: activeStroke.width ?? baseStroke?.width ?? 0,
       color: activeStroke.color ?? baseStroke?.color ?? "#000000",
@@ -2966,7 +2970,10 @@ function extractStrokeConfig(asset, isActive) {
   }
   return void 0;
 }
-function extractShadowConfig(asset) {
+function extractShadowConfig(asset, isActive) {
+  if (isActive) {
+    return void 0;
+  }
   const shadow = asset.shadow;
   if (!shadow) {
     return void 0;
@@ -3073,27 +3080,10 @@ function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
     visibleCharacters: animState.visibleCharacters,
     letterSpacing: fontConfig.letterSpacing > 0 ? fontConfig.letterSpacing : void 0,
     stroke: extractStrokeConfig(asset, isActive),
-    shadow: extractShadowConfig(asset),
+    shadow: extractShadowConfig(asset, isActive),
     background: extractBackgroundConfig(asset, isActive, fontConfig.size)
   };
 }
-function calculateGroupBounds(activeGroup, padding, frameWidth, activeScale, fontSize) {
-  let minY = Infinity;
-  let maxY = -Infinity;
-  for (const line of activeGroup.lines) {
-    const lineY = line.y - line.height * ASCENT_RATIO;
-    const lineBottom = line.y + line.height * DESCENT_RATIO;
-    if (lineY < minY) minY = lineY;
-    if (lineBottom > maxY) maxY = lineBottom;
-  }
-  const scaleExpansion = activeScale > 1 ? (activeScale - 1) * fontSize : 0;
-  return {
-    bgX: 0,
-    bgY: minY - padding.top - scaleExpansion,
-    bgWidth: frameWidth,
-    bgHeight: maxY - minY + padding.top + padding.bottom + scaleExpansion * 2
-  };
-}
 function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, config) {
   if (layout.store.length === 0) {
     return [];
@@ -3113,48 +3103,35 @@ function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, co
     fontConfig.size
   );
   const ops = [];
-  const activeGroup = layout.groups.find(
-    (g) => frameTimeMs >= g.startTime && frameTimeMs <= g.endTime
-  );
-  if (activeGroup && activeGroup.lines.length > 0) {
-    const padding = extractCaptionPadding(asset);
-    const { bgX, bgY, bgWidth, bgHeight } = calculateGroupBounds(
-      activeGroup,
-      padding,
-      config.frameWidth,
-      activeScale,
-      fontConfig.size
-    );
-    const captionBg = extractCaptionBackground(asset);
-    if (captionBg) {
-      ops.push({
-        op: "DrawCaptionBackground",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
-        color: captionBg.color,
-        opacity: captionBg.opacity,
-        borderRadius: captionBg.borderRadius
-      });
-    }
-    const borderConfig = extractCaptionBorder(asset);
-    if (borderConfig) {
-      const halfBorder = borderConfig.width / 2;
-      ops.push({
-        op: "RectangleStroke",
-        x: bgX + halfBorder,
-        y: bgY + halfBorder,
-        width: bgWidth - borderConfig.width,
-        height: bgHeight - borderConfig.width,
-        stroke: {
-          width: borderConfig.width,
-          color: borderConfig.color,
-          opacity: borderConfig.opacity
-        },
-        borderRadius: borderConfig.radius > 0 ? borderConfig.radius : void 0
-      });
-    }
+  const captionBg = extractCaptionBackground(asset);
+  if (captionBg) {
+    ops.push({
+      op: "DrawCaptionBackground",
+      x: 0,
+      y: 0,
+      width: config.frameWidth,
+      height: config.frameHeight,
+      color: captionBg.color,
+      opacity: captionBg.opacity,
+      borderRadius: captionBg.borderRadius
+    });
+  }
+  const borderConfig = extractCaptionBorder(asset);
+  if (borderConfig) {
+    const halfBorder = borderConfig.width / 2;
+    ops.push({
+      op: "RectangleStroke",
+      x: halfBorder,
+      y: halfBorder,
+      width: config.frameWidth - borderConfig.width,
+      height: config.frameHeight - borderConfig.width,
+      stroke: {
+        width: borderConfig.width,
+        color: borderConfig.color,
+        opacity: borderConfig.opacity
+      },
+      borderRadius: borderConfig.radius > 0 ? borderConfig.radius : void 0
+    });
   }
   const nonActiveOps = [];
   const activeOps = [];
@@ -3501,40 +3478,61 @@ async function createNodePainter(opts) {
             i++;
           }
           renderToBoth((context) => {
-            for (const wordOp of captionWordOps) {
-              if (!wordOp.background) continue;
+            let bgIdx = 0;
+            while (bgIdx < captionWordOps.length) {
+              const wordOp = captionWordOps[bgIdx];
+              if (!wordOp.background) {
+                bgIdx++;
+                continue;
+              }
               const wordDisplayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
-              if (wordDisplayText.length === 0) continue;
+              if (wordDisplayText.length === 0) {
+                bgIdx++;
+                continue;
+              }
+              const mergeGroup = [wordOp];
+              let nextIdx = bgIdx + 1;
+              while (nextIdx < captionWordOps.length) {
+                const nextWord = captionWordOps[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++;
+              }
+              const firstWord = mergeGroup[0];
+              const lastWord = mergeGroup[mergeGroup.length - 1];
+              const firstBg = firstWord.background;
+              const mergedLeft = firstWord.x + firstWord.transform.translateX;
+              const mergedRight = lastWord.x + lastWord.transform.translateX + lastWord.width;
+              const mergedWidth = mergedRight - mergedLeft;
               context.save();
-              const bgTx = Math.round(wordOp.x + wordOp.transform.translateX);
-              const bgTy = Math.round(wordOp.y + wordOp.transform.translateY);
+              const bgTx = Math.round(mergedLeft);
+              const bgTy = Math.round(firstWord.y + firstWord.transform.translateY);
               context.translate(bgTx, bgTy);
-              if (wordOp.transform.scale !== 1) {
-                const halfWidth = wordOp.width / 2;
+              if (firstWord.transform.scale !== 1) {
+                const halfWidth = mergedWidth / 2;
                 context.translate(halfWidth, 0);
-                context.scale(wordOp.transform.scale, wordOp.transform.scale);
+                context.scale(firstWord.transform.scale, firstWord.transform.scale);
                 context.translate(-halfWidth, 0);
               }
-              context.globalAlpha = wordOp.transform.opacity;
-              context.font = `${wordOp.fontWeight} ${wordOp.fontSize}px "${wordOp.fontFamily}"`;
-              context.textBaseline = "alphabetic";
-              if (wordOp.letterSpacing) {
-                context.letterSpacing = `${wordOp.letterSpacing}px`;
-              }
-              const bgTextWidth = wordOp.width;
-              const bgAscent = wordOp.fontSize * ASCENT_RATIO;
-              const bgDescent = wordOp.fontSize * DESCENT_RATIO;
+              context.globalAlpha = firstWord.transform.opacity;
+              const bgAscent = firstWord.fontSize * ASCENT_RATIO;
+              const bgDescent = firstWord.fontSize * DESCENT_RATIO;
               const bgTextHeight = bgAscent + bgDescent;
-              const bgX = -wordOp.background.padding;
-              const bgY = -bgAscent - wordOp.background.padding;
-              const bgW = bgTextWidth + wordOp.background.padding * 2;
-              const bgH = bgTextHeight + wordOp.background.padding * 2;
-              const bgC = parseHex6(wordOp.background.color, wordOp.background.opacity);
+              const bgX = -firstBg.padding;
+              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, wordOp.background.borderRadius);
+              roundRectPath(context, bgX, bgY, bgW, bgH, firstBg.borderRadius);
               context.fill();
               context.restore();
+              bgIdx = nextIdx;
             }
             for (const wordOp of captionWordOps) {
               const displayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
@@ -5319,16 +5317,17 @@ var CaptionLayoutEngine = class {
     });
     const contentHeight = config.frameHeight - config.padding.top - config.padding.bottom;
     const contentWidth = config.frameWidth - config.padding.left - config.padding.right;
+    const ASCENT_RATIO2 = 0.8;
     const calculateGroupY = (group) => {
       const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
       switch (config.verticalAlign) {
         case "top":
-          return config.padding.top + config.fontSize * 1.5;
+          return config.padding.top + config.fontSize * ASCENT_RATIO2;
         case "bottom":
-          return config.frameHeight - config.padding.bottom - totalHeight - config.fontSize * 0.5;
+          return config.frameHeight - config.padding.bottom - totalHeight + config.fontSize * ASCENT_RATIO2;
         case "middle":
         default:
-          return config.padding.top + (contentHeight - totalHeight) / 2 + config.fontSize;
+          return config.padding.top + (contentHeight - totalHeight) / 2 + config.fontSize * ASCENT_RATIO2;
       }
     };
     const allWordTexts = store.words.slice(0, store.length);

package/dist/entry.node.js

@@ -2439,10 +2439,11 @@ function calculateTypewriterState(ctx, charCount, speed) {
     isActive: isWordActive(ctx)
   };
 }
-function calculateNoneState(ctx) {
+function calculateNoneState(_ctx) {
   return {
     opacity: 1,
-    isActive: isWordActive(ctx)
+    isActive: false,
+    fillProgress: 0
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
@@ -2485,7 +2486,7 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, ac
       break;
   }
   const mergedState = { ...baseState, ...partialState };
-  if (mergedState.isActive && activeScale !== 1 && config.style !== "pop") {
+  if (mergedState.isActive && activeScale !== 1 && config.style !== "pop" && config.style !== "none") {
     mergedState.scale = activeScale;
   }
   return mergedState;
@@ -2547,7 +2548,10 @@ function extractStrokeConfig(asset, isActive) {
   if (!baseStroke && !activeStroke) {
     return void 0;
   }
-  if (isActive && activeStroke) {
+  if (isActive) {
+    if (!activeStroke) {
+      return void 0;
+    }
     return {
       width: activeStroke.width ?? baseStroke?.width ?? 0,
       color: activeStroke.color ?? baseStroke?.color ?? "#000000",
@@ -2563,7 +2567,10 @@ function extractStrokeConfig(asset, isActive) {
   }
   return void 0;
 }
-function extractShadowConfig(asset) {
+function extractShadowConfig(asset, isActive) {
+  if (isActive) {
+    return void 0;
+  }
   const shadow = asset.shadow;
   if (!shadow) {
     return void 0;
@@ -2670,27 +2677,10 @@ function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
     visibleCharacters: animState.visibleCharacters,
     letterSpacing: fontConfig.letterSpacing > 0 ? fontConfig.letterSpacing : void 0,
     stroke: extractStrokeConfig(asset, isActive),
-    shadow: extractShadowConfig(asset),
+    shadow: extractShadowConfig(asset, isActive),
     background: extractBackgroundConfig(asset, isActive, fontConfig.size)
   };
 }
-function calculateGroupBounds(activeGroup, padding, frameWidth, activeScale, fontSize) {
-  let minY = Infinity;
-  let maxY = -Infinity;
-  for (const line of activeGroup.lines) {
-    const lineY = line.y - line.height * ASCENT_RATIO;
-    const lineBottom = line.y + line.height * DESCENT_RATIO;
-    if (lineY < minY) minY = lineY;
-    if (lineBottom > maxY) maxY = lineBottom;
-  }
-  const scaleExpansion = activeScale > 1 ? (activeScale - 1) * fontSize : 0;
-  return {
-    bgX: 0,
-    bgY: minY - padding.top - scaleExpansion,
-    bgWidth: frameWidth,
-    bgHeight: maxY - minY + padding.top + padding.bottom + scaleExpansion * 2
-  };
-}
 function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, config) {
   if (layout.store.length === 0) {
     return [];
@@ -2710,48 +2700,35 @@ function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, co
     fontConfig.size
   );
   const ops = [];
-  const activeGroup = layout.groups.find(
-    (g) => frameTimeMs >= g.startTime && frameTimeMs <= g.endTime
-  );
-  if (activeGroup && activeGroup.lines.length > 0) {
-    const padding = extractCaptionPadding(asset);
-    const { bgX, bgY, bgWidth, bgHeight } = calculateGroupBounds(
-      activeGroup,
-      padding,
-      config.frameWidth,
-      activeScale,
-      fontConfig.size
-    );
-    const captionBg = extractCaptionBackground(asset);
-    if (captionBg) {
-      ops.push({
-        op: "DrawCaptionBackground",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
-        color: captionBg.color,
-        opacity: captionBg.opacity,
-        borderRadius: captionBg.borderRadius
-      });
-    }
-    const borderConfig = extractCaptionBorder(asset);
-    if (borderConfig) {
-      const halfBorder = borderConfig.width / 2;
-      ops.push({
-        op: "RectangleStroke",
-        x: bgX + halfBorder,
-        y: bgY + halfBorder,
-        width: bgWidth - borderConfig.width,
-        height: bgHeight - borderConfig.width,
-        stroke: {
-          width: borderConfig.width,
-          color: borderConfig.color,
-          opacity: borderConfig.opacity
-        },
-        borderRadius: borderConfig.radius > 0 ? borderConfig.radius : void 0
-      });
-    }
+  const captionBg = extractCaptionBackground(asset);
+  if (captionBg) {
+    ops.push({
+      op: "DrawCaptionBackground",
+      x: 0,
+      y: 0,
+      width: config.frameWidth,
+      height: config.frameHeight,
+      color: captionBg.color,
+      opacity: captionBg.opacity,
+      borderRadius: captionBg.borderRadius
+    });
+  }
+  const borderConfig = extractCaptionBorder(asset);
+  if (borderConfig) {
+    const halfBorder = borderConfig.width / 2;
+    ops.push({
+      op: "RectangleStroke",
+      x: halfBorder,
+      y: halfBorder,
+      width: config.frameWidth - borderConfig.width,
+      height: config.frameHeight - borderConfig.width,
+      stroke: {
+        width: borderConfig.width,
+        color: borderConfig.color,
+        opacity: borderConfig.opacity
+      },
+      borderRadius: borderConfig.radius > 0 ? borderConfig.radius : void 0
+    });
   }
   const nonActiveOps = [];
   const activeOps = [];
@@ -3098,40 +3075,61 @@ async function createNodePainter(opts) {
             i++;
           }
           renderToBoth((context) => {
-            for (const wordOp of captionWordOps) {
-              if (!wordOp.background) continue;
+            let bgIdx = 0;
+            while (bgIdx < captionWordOps.length) {
+              const wordOp = captionWordOps[bgIdx];
+              if (!wordOp.background) {
+                bgIdx++;
+                continue;
+              }
               const wordDisplayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
-              if (wordDisplayText.length === 0) continue;
+              if (wordDisplayText.length === 0) {
+                bgIdx++;
+                continue;
+              }
+              const mergeGroup = [wordOp];
+              let nextIdx = bgIdx + 1;
+              while (nextIdx < captionWordOps.length) {
+                const nextWord = captionWordOps[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++;
+              }
+              const firstWord = mergeGroup[0];
+              const lastWord = mergeGroup[mergeGroup.length - 1];
+              const firstBg = firstWord.background;
+              const mergedLeft = firstWord.x + firstWord.transform.translateX;
+              const mergedRight = lastWord.x + lastWord.transform.translateX + lastWord.width;
+              const mergedWidth = mergedRight - mergedLeft;
               context.save();
-              const bgTx = Math.round(wordOp.x + wordOp.transform.translateX);
-              const bgTy = Math.round(wordOp.y + wordOp.transform.translateY);
+              const bgTx = Math.round(mergedLeft);
+              const bgTy = Math.round(firstWord.y + firstWord.transform.translateY);
               context.translate(bgTx, bgTy);
-              if (wordOp.transform.scale !== 1) {
-                const halfWidth = wordOp.width / 2;
+              if (firstWord.transform.scale !== 1) {
+                const halfWidth = mergedWidth / 2;
                 context.translate(halfWidth, 0);
-                context.scale(wordOp.transform.scale, wordOp.transform.scale);
+                context.scale(firstWord.transform.scale, firstWord.transform.scale);
                 context.translate(-halfWidth, 0);
               }
-              context.globalAlpha = wordOp.transform.opacity;
-              context.font = `${wordOp.fontWeight} ${wordOp.fontSize}px "${wordOp.fontFamily}"`;
-              context.textBaseline = "alphabetic";
-              if (wordOp.letterSpacing) {
-                context.letterSpacing = `${wordOp.letterSpacing}px`;
-              }
-              const bgTextWidth = wordOp.width;
-              const bgAscent = wordOp.fontSize * ASCENT_RATIO;
-              const bgDescent = wordOp.fontSize * DESCENT_RATIO;
+              context.globalAlpha = firstWord.transform.opacity;
+              const bgAscent = firstWord.fontSize * ASCENT_RATIO;
+              const bgDescent = firstWord.fontSize * DESCENT_RATIO;
               const bgTextHeight = bgAscent + bgDescent;
-              const bgX = -wordOp.background.padding;
-              const bgY = -bgAscent - wordOp.background.padding;
-              const bgW = bgTextWidth + wordOp.background.padding * 2;
-              const bgH = bgTextHeight + wordOp.background.padding * 2;
-              const bgC = parseHex6(wordOp.background.color, wordOp.background.opacity);
+              const bgX = -firstBg.padding;
+              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, wordOp.background.borderRadius);
+              roundRectPath(context, bgX, bgY, bgW, bgH, firstBg.borderRadius);
               context.fill();
               context.restore();
+              bgIdx = nextIdx;
             }
             for (const wordOp of captionWordOps) {
               const displayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
@@ -4916,16 +4914,17 @@ var CaptionLayoutEngine = class {
     });
     const contentHeight = config.frameHeight - config.padding.top - config.padding.bottom;
     const contentWidth = config.frameWidth - config.padding.left - config.padding.right;
+    const ASCENT_RATIO2 = 0.8;
     const calculateGroupY = (group) => {
       const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
       switch (config.verticalAlign) {
         case "top":
-          return config.padding.top + config.fontSize * 1.5;
+          return config.padding.top + config.fontSize * ASCENT_RATIO2;
         case "bottom":
-          return config.frameHeight - config.padding.bottom - totalHeight - config.fontSize * 0.5;
+          return config.frameHeight - config.padding.bottom - totalHeight + config.fontSize * ASCENT_RATIO2;
         case "middle":
         default:
-          return config.padding.top + (contentHeight - totalHeight) / 2 + config.fontSize;
+          return config.padding.top + (contentHeight - totalHeight) / 2 + config.fontSize * ASCENT_RATIO2;
       }
     };
     const allWordTexts = store.words.slice(0, store.length);

package/dist/entry.web.js

@@ -34474,10 +34474,11 @@ function calculateTypewriterState(ctx, charCount, speed) {
     isActive: isWordActive(ctx)
   };
 }
-function calculateNoneState(ctx) {
+function calculateNoneState(_ctx) {
   return {
     opacity: 1,
-    isActive: isWordActive(ctx)
+    isActive: false,
+    fillProgress: 0
   };
 }
 function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
@@ -34520,7 +34521,7 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config2, a
       break;
   }
   const mergedState = { ...baseState, ...partialState };
-  if (mergedState.isActive && activeScale !== 1 && config2.style !== "pop") {
+  if (mergedState.isActive && activeScale !== 1 && config2.style !== "pop" && config2.style !== "none") {
     mergedState.scale = activeScale;
   }
   return mergedState;
@@ -34582,7 +34583,10 @@ function extractStrokeConfig(asset, isActive) {
   if (!baseStroke && !activeStroke) {
     return void 0;
   }
-  if (isActive && activeStroke) {
+  if (isActive) {
+    if (!activeStroke) {
+      return void 0;
+    }
     return {
       width: activeStroke.width ?? baseStroke?.width ?? 0,
       color: activeStroke.color ?? baseStroke?.color ?? "#000000",
@@ -34598,7 +34602,10 @@ function extractStrokeConfig(asset, isActive) {
   }
   return void 0;
 }
-function extractShadowConfig(asset) {
+function extractShadowConfig(asset, isActive) {
+  if (isActive) {
+    return void 0;
+  }
   const shadow = asset.shadow;
   if (!shadow) {
     return void 0;
@@ -34705,27 +34712,10 @@ function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
     visibleCharacters: animState.visibleCharacters,
     letterSpacing: fontConfig.letterSpacing > 0 ? fontConfig.letterSpacing : void 0,
     stroke: extractStrokeConfig(asset, isActive),
-    shadow: extractShadowConfig(asset),
+    shadow: extractShadowConfig(asset, isActive),
     background: extractBackgroundConfig(asset, isActive, fontConfig.size)
   };
 }
-function calculateGroupBounds(activeGroup, padding, frameWidth, activeScale, fontSize) {
-  let minY = Infinity;
-  let maxY = -Infinity;
-  for (const line of activeGroup.lines) {
-    const lineY = line.y - line.height * ASCENT_RATIO;
-    const lineBottom = line.y + line.height * DESCENT_RATIO;
-    if (lineY < minY) minY = lineY;
-    if (lineBottom > maxY) maxY = lineBottom;
-  }
-  const scaleExpansion = activeScale > 1 ? (activeScale - 1) * fontSize : 0;
-  return {
-    bgX: 0,
-    bgY: minY - padding.top - scaleExpansion,
-    bgWidth: frameWidth,
-    bgHeight: maxY - minY + padding.top + padding.bottom + scaleExpansion * 2
-  };
-}
 function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, config2) {
   if (layout.store.length === 0) {
     return [];
@@ -34745,48 +34735,35 @@ function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, co
     fontConfig.size
   );
   const ops = [];
-  const activeGroup = layout.groups.find(
-    (g) => frameTimeMs >= g.startTime && frameTimeMs <= g.endTime
-  );
-  if (activeGroup && activeGroup.lines.length > 0) {
-    const padding = extractCaptionPadding(asset);
-    const { bgX, bgY, bgWidth, bgHeight } = calculateGroupBounds(
-      activeGroup,
-      padding,
-      config2.frameWidth,
-      activeScale,
-      fontConfig.size
-    );
-    const captionBg = extractCaptionBackground(asset);
-    if (captionBg) {
-      ops.push({
-        op: "DrawCaptionBackground",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
-        color: captionBg.color,
-        opacity: captionBg.opacity,
-        borderRadius: captionBg.borderRadius
-      });
-    }
-    const borderConfig = extractCaptionBorder(asset);
-    if (borderConfig) {
-      const halfBorder = borderConfig.width / 2;
-      ops.push({
-        op: "RectangleStroke",
-        x: bgX + halfBorder,
-        y: bgY + halfBorder,
-        width: bgWidth - borderConfig.width,
-        height: bgHeight - borderConfig.width,
-        stroke: {
-          width: borderConfig.width,
-          color: borderConfig.color,
-          opacity: borderConfig.opacity
-        },
-        borderRadius: borderConfig.radius > 0 ? borderConfig.radius : void 0
-      });
-    }
+  const captionBg = extractCaptionBackground(asset);
+  if (captionBg) {
+    ops.push({
+      op: "DrawCaptionBackground",
+      x: 0,
+      y: 0,
+      width: config2.frameWidth,
+      height: config2.frameHeight,
+      color: captionBg.color,
+      opacity: captionBg.opacity,
+      borderRadius: captionBg.borderRadius
+    });
+  }
+  const borderConfig = extractCaptionBorder(asset);
+  if (borderConfig) {
+    const halfBorder = borderConfig.width / 2;
+    ops.push({
+      op: "RectangleStroke",
+      x: halfBorder,
+      y: halfBorder,
+      width: config2.frameWidth - borderConfig.width,
+      height: config2.frameHeight - borderConfig.width,
+      stroke: {
+        width: borderConfig.width,
+        color: borderConfig.color,
+        opacity: borderConfig.opacity
+      },
+      borderRadius: borderConfig.radius > 0 ? borderConfig.radius : void 0
+    });
   }
   const nonActiveOps = [];
   const activeOps = [];
@@ -35066,38 +35043,59 @@ function createWebPainter(canvas) {
             captionWordOps.push(nextOp);
             i++;
           }
-          for (const wordOp of captionWordOps) {
-            if (!wordOp.background) continue;
+          let bgIdx = 0;
+          while (bgIdx < captionWordOps.length) {
+            const wordOp = captionWordOps[bgIdx];
+            if (!wordOp.background) {
+              bgIdx++;
+              continue;
+            }
             const wordDisplayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
-            if (wordDisplayText.length === 0) continue;
+            if (wordDisplayText.length === 0) {
+              bgIdx++;
+              continue;
+            }
+            const mergeGroup = [wordOp];
+            let nextIdx = bgIdx + 1;
+            while (nextIdx < captionWordOps.length) {
+              const nextWord = captionWordOps[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++;
+            }
+            const firstWord = mergeGroup[0];
+            const lastWord = mergeGroup[mergeGroup.length - 1];
+            const firstBg = firstWord.background;
+            const mergedLeft = firstWord.x + firstWord.transform.translateX;
+            const mergedRight = lastWord.x + lastWord.transform.translateX + lastWord.width;
+            const mergedWidth = mergedRight - mergedLeft;
             ctx.save();
-            const bgTx = Math.round(wordOp.x + wordOp.transform.translateX);
-            const bgTy = Math.round(wordOp.y + wordOp.transform.translateY);
+            const bgTx = Math.round(mergedLeft);
+            const bgTy = Math.round(firstWord.y + firstWord.transform.translateY);
             ctx.translate(bgTx, bgTy);
-            if (wordOp.transform.scale !== 1) {
-              const halfWidth = wordOp.width / 2;
+            if (firstWord.transform.scale !== 1) {
+              const halfWidth = mergedWidth / 2;
               ctx.translate(halfWidth, 0);
-              ctx.scale(wordOp.transform.scale, wordOp.transform.scale);
+              ctx.scale(firstWord.transform.scale, firstWord.transform.scale);
               ctx.translate(-halfWidth, 0);
             }
-            ctx.globalAlpha = wordOp.transform.opacity;
-            ctx.font = `${wordOp.fontWeight} ${wordOp.fontSize}px "${wordOp.fontFamily}"`;
-            ctx.textBaseline = "alphabetic";
-            if (wordOp.letterSpacing) {
-              ctx.letterSpacing = `${wordOp.letterSpacing}px`;
-            }
-            const bgTextWidth = wordOp.width;
-            const bgAscent = wordOp.fontSize * ASCENT_RATIO;
-            const bgDescent = wordOp.fontSize * DESCENT_RATIO;
+            ctx.globalAlpha = firstWord.transform.opacity;
+            const bgAscent = firstWord.fontSize * ASCENT_RATIO;
+            const bgDescent = firstWord.fontSize * DESCENT_RATIO;
             const bgTextHeight = bgAscent + bgDescent;
-            const bgX = -wordOp.background.padding;
-            const bgY = -bgAscent - wordOp.background.padding;
-            const bgW = bgTextWidth + wordOp.background.padding * 2;
-            const bgH = bgTextHeight + wordOp.background.padding * 2;
-            const bgC = parseHex6(wordOp.background.color, wordOp.background.opacity);
+            const bgX = -firstBg.padding;
+            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, wordOp.background.borderRadius);
+            drawRoundedRect(ctx, bgX, bgY, bgW, bgH, firstBg.borderRadius);
             ctx.restore();
+            bgIdx = nextIdx;
           }
           for (const wordOp of captionWordOps) {
             const displayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
@@ -37222,16 +37220,17 @@ var CaptionLayoutEngine = class {
     });
     const contentHeight = config2.frameHeight - config2.padding.top - config2.padding.bottom;
     const contentWidth = config2.frameWidth - config2.padding.left - config2.padding.right;
+    const ASCENT_RATIO2 = 0.8;
     const calculateGroupY = (group) => {
       const totalHeight = group.lines.length * config2.fontSize * config2.lineHeight;
       switch (config2.verticalAlign) {
         case "top":
-          return config2.padding.top + config2.fontSize * 1.5;
+          return config2.padding.top + config2.fontSize * ASCENT_RATIO2;
         case "bottom":
-          return config2.frameHeight - config2.padding.bottom - totalHeight - config2.fontSize * 0.5;
+          return config2.frameHeight - config2.padding.bottom - totalHeight + config2.fontSize * ASCENT_RATIO2;
         case "middle":
         default:
-          return config2.padding.top + (contentHeight - totalHeight) / 2 + config2.fontSize;
+          return config2.padding.top + (contentHeight - totalHeight) / 2 + config2.fontSize * ASCENT_RATIO2;
       }
     };
     const allWordTexts = store.words.slice(0, store.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",
@@ -34,8 +34,11 @@
     "test:caption-web": "vite dev examples/caption-tests",
     "test:padding-node": "node examples/captionpaddingtests/node-test.mjs",
     "test:padding-web": "vite dev examples/captionpaddingtests",
+    "test:fixes-node": "node examples/caption-fix-tests/node-test.mjs",
+    "test:fixes-web": "vite dev examples/caption-fix-tests",
     "prepublishOnly": "node scripts/publish-guard.cjs && pnpm build",
-    "test": "node --test tests/build-verify.mjs"
+    "test": "node --test tests/build-verify.mjs",
+    "test:logic": "node --test tests/caption-logic.mjs"
   },
   "publishConfig": {
     "access": "public",