@shotstack/shotstack-canvas 1.4.7 → 1.5.0

package/dist/entry.node.cjs

@@ -132,11 +132,26 @@ var animationSchema = import_joi.default.object({
     otherwise: import_joi.default.forbidden()
   })
 }).unknown(false);
+var borderSchema = import_joi.default.object({
+  width: import_joi.default.number().min(0).default(0),
+  color: import_joi.default.string().pattern(HEX6).default("#000000"),
+  opacity: import_joi.default.number().min(0).max(1).default(1)
+}).unknown(false);
 var backgroundSchema = import_joi.default.object({
   color: import_joi.default.string().pattern(HEX6).optional(),
   opacity: import_joi.default.number().min(0).max(1).default(1),
-  borderRadius: import_joi.default.number().min(0).default(0)
+  borderRadius: import_joi.default.number().min(0).default(0),
+  border: borderSchema.optional()
 }).unknown(false);
+var paddingSchema = import_joi.default.alternatives().try(
+  import_joi.default.number().min(0).default(0),
+  import_joi.default.object({
+    top: import_joi.default.number().min(0).default(0),
+    right: import_joi.default.number().min(0).default(0),
+    bottom: import_joi.default.number().min(0).default(0),
+    left: import_joi.default.number().min(0).default(0)
+  }).unknown(false)
+);
 var customFontSchema = import_joi.default.object({
   src: import_joi.default.string().uri().required(),
   family: import_joi.default.string().required(),
@@ -154,6 +169,7 @@ var RichTextAssetSchema = import_joi.default.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
   customFonts: import_joi.default.array().items(customFontSchema).optional(),
@@ -828,15 +844,27 @@ function decorationGeometry(kind, p) {
 }
 
 // src/core/drawops.ts
+function normalizePadding(padding) {
+  if (padding === void 0 || padding === null) {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+  if (typeof padding === "number") {
+    return { top: padding, right: padding, bottom: padding, left: padding };
+  }
+  return padding;
+}
 async function buildDrawOps(p) {
   const ops = [];
+  const padding = normalizePadding(p.padding);
+  const borderWidth = p.background?.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
     height: p.canvas.height,
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
-    bg: p.background && p.background.color ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius } : void 0
+    bg: void 0
+    // Background will be drawn as a separate layer with proper padding/border
   });
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
@@ -846,33 +874,34 @@ async function buildDrawOps(p) {
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size;
+      blockY = p.font.size + padding.top;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
+  const textOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = 0;
+        lineX = padding.left;
         break;
       case "right":
-        lineX = p.textRect.width - line.width;
+        lineX = p.textRect.width - line.width + padding.left;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2;
+        lineX = (p.textRect.width - line.width) / 2 + padding.left;
         break;
     }
     let xCursor = lineX;
@@ -896,7 +925,7 @@ async function buildDrawOps(p) {
       if (x2 > gMaxX) gMaxX = x2;
       if (y2 > gMaxY) gMaxY = y2;
       if (p.shadow && p.shadow.blur > 0) {
-        ops.push({
+        textOps.push({
           isShadow: true,
           op: "FillPath",
           path,
@@ -907,7 +936,7 @@ async function buildDrawOps(p) {
         });
       }
       if (p.stroke && p.stroke.width > 0) {
-        ops.push({
+        textOps.push({
           op: "StrokePath",
           path,
           x: glyphX,
@@ -918,7 +947,7 @@ async function buildDrawOps(p) {
           opacity: p.stroke.opacity
         });
       }
-      ops.push({
+      textOps.push({
         op: "FillPath",
         path,
         x: glyphX,
@@ -935,7 +964,7 @@ async function buildDrawOps(p) {
         lineWidth: line.width,
         xStart: lineX
       });
-      ops.push({
+      textOps.push({
         op: "DecorationLine",
         from: { x: deco.x1, y: deco.y },
         to: { x: deco.x2, y: deco.y },
@@ -947,12 +976,46 @@ async function buildDrawOps(p) {
   }
   if (gMinX !== Infinity) {
     const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
-    for (const op of ops) {
+    for (const op of textOps) {
       if (op.op === "FillPath" && !op.isShadow) {
         op.gradientBBox = gbox;
       }
     }
   }
+  if (p.background && (p.background.color || p.background.border)) {
+    const bgX = 0;
+    const bgY = 0;
+    const bgWidth = p.canvas.width;
+    const bgHeight = p.canvas.height;
+    if (p.background.color) {
+      ops.push({
+        op: "Rectangle",
+        x: bgX,
+        y: bgY,
+        width: bgWidth,
+        height: bgHeight,
+        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
+        borderRadius: p.background.borderRadius
+      });
+    }
+    if (p.background.border && p.background.border.width > 0) {
+      const halfBorder = p.background.border.width / 2;
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - p.background.border.width,
+        height: bgHeight - p.background.border.width,
+        stroke: {
+          width: p.background.border.width,
+          color: p.background.border.color,
+          opacity: p.background.border.opacity
+        },
+        borderRadius: Math.max(0, p.background.borderRadius - halfBorder)
+      });
+    }
+  }
+  ops.push(...textOps);
   return ops;
 }
 function tokenizePath(d) {
@@ -1762,6 +1825,44 @@ async function createNodePainter(opts) {
           });
           continue;
         }
+        if (op.op === "Rectangle") {
+          renderToBoth((context) => {
+            context.save();
+            const fill = makeGradientFromBBox(context, op.fill, {
+              x: op.x,
+              y: op.y,
+              w: op.width,
+              h: op.height
+            });
+            context.fillStyle = fill;
+            if (op.borderRadius && op.borderRadius > 0) {
+              context.beginPath();
+              roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
+              context.fill();
+            } else {
+              context.fillRect(op.x, op.y, op.width, op.height);
+            }
+            context.restore();
+          });
+          continue;
+        }
+        if (op.op === "RectangleStroke") {
+          renderToBoth((context) => {
+            context.save();
+            const c = parseHex6(op.stroke.color, op.stroke.opacity);
+            context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            context.lineWidth = op.stroke.width;
+            if (op.borderRadius && op.borderRadius > 0) {
+              context.beginPath();
+              roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
+              context.stroke();
+            } else {
+              context.strokeRect(op.x, op.y, op.width, op.height);
+            }
+            context.restore();
+          });
+          continue;
+        }
       }
       if (needsAlphaExtraction) {
         const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -2325,14 +2426,15 @@ async function createTextEngine(opts = {}) {
             `Failed to layout text: ${err instanceof Error ? err.message : String(err)}`
           );
         }
+        const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
         const textRect = {
           x: 0,
           y: 0,
           width: asset.width ?? width,
           height: asset.height ?? height
         };
-        const canvasW = asset.width ?? width;
-        const canvasH = asset.height ?? height;
+        const canvasW = (asset.width ?? width) + padding.left + padding.right;
+        const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
         const canvasPR = asset.pixelRatio ?? pixelRatio;
         let ops0;
         try {
@@ -2359,6 +2461,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });

package/dist/entry.node.d.cts

@@ -64,6 +64,17 @@ type RichTextValidated = Required<{
         color?: string;
         opacity: number;
         borderRadius: number;
+        border?: {
+            width: number;
+            color: string;
+            opacity: number;
+        };
+    };
+    padding?: number | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
     };
     align?: {
         horizontal: "left" | "center" | "right";
@@ -177,6 +188,26 @@ type DrawOp = {
     width: number;
     color: string;
     opacity: number;
+} | {
+    op: "Rectangle";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: GradientSpec;
+    borderRadius?: number;
+} | {
+    op: "RectangleStroke";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    stroke: {
+        width: number;
+        color: string;
+        opacity: number;
+    };
+    borderRadius?: number;
 };
 type EngineInit = {
     width: number;

package/dist/entry.node.d.ts

@@ -64,6 +64,17 @@ type RichTextValidated = Required<{
         color?: string;
         opacity: number;
         borderRadius: number;
+        border?: {
+            width: number;
+            color: string;
+            opacity: number;
+        };
+    };
+    padding?: number | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
     };
     align?: {
         horizontal: "left" | "center" | "right";
@@ -177,6 +188,26 @@ type DrawOp = {
     width: number;
     color: string;
     opacity: number;
+} | {
+    op: "Rectangle";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: GradientSpec;
+    borderRadius?: number;
+} | {
+    op: "RectangleStroke";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    stroke: {
+        width: number;
+        color: string;
+        opacity: number;
+    };
+    borderRadius?: number;
 };
 type EngineInit = {
     width: number;

package/dist/entry.node.js

@@ -94,11 +94,26 @@ var animationSchema = Joi.object({
     otherwise: Joi.forbidden()
   })
 }).unknown(false);
+var borderSchema = Joi.object({
+  width: Joi.number().min(0).default(0),
+  color: Joi.string().pattern(HEX6).default("#000000"),
+  opacity: Joi.number().min(0).max(1).default(1)
+}).unknown(false);
 var backgroundSchema = Joi.object({
   color: Joi.string().pattern(HEX6).optional(),
   opacity: Joi.number().min(0).max(1).default(1),
-  borderRadius: Joi.number().min(0).default(0)
+  borderRadius: Joi.number().min(0).default(0),
+  border: borderSchema.optional()
 }).unknown(false);
+var paddingSchema = Joi.alternatives().try(
+  Joi.number().min(0).default(0),
+  Joi.object({
+    top: Joi.number().min(0).default(0),
+    right: Joi.number().min(0).default(0),
+    bottom: Joi.number().min(0).default(0),
+    left: Joi.number().min(0).default(0)
+  }).unknown(false)
+);
 var customFontSchema = Joi.object({
   src: Joi.string().uri().required(),
   family: Joi.string().required(),
@@ -116,6 +131,7 @@ var RichTextAssetSchema = Joi.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
   customFonts: Joi.array().items(customFontSchema).optional(),
@@ -789,15 +805,27 @@ function decorationGeometry(kind, p) {
 }
 
 // src/core/drawops.ts
+function normalizePadding(padding) {
+  if (padding === void 0 || padding === null) {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+  if (typeof padding === "number") {
+    return { top: padding, right: padding, bottom: padding, left: padding };
+  }
+  return padding;
+}
 async function buildDrawOps(p) {
   const ops = [];
+  const padding = normalizePadding(p.padding);
+  const borderWidth = p.background?.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
     height: p.canvas.height,
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
-    bg: p.background && p.background.color ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius } : void 0
+    bg: void 0
+    // Background will be drawn as a separate layer with proper padding/border
   });
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
@@ -807,33 +835,34 @@ async function buildDrawOps(p) {
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size;
+      blockY = p.font.size + padding.top;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
+  const textOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = 0;
+        lineX = padding.left;
         break;
       case "right":
-        lineX = p.textRect.width - line.width;
+        lineX = p.textRect.width - line.width + padding.left;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2;
+        lineX = (p.textRect.width - line.width) / 2 + padding.left;
         break;
     }
     let xCursor = lineX;
@@ -857,7 +886,7 @@ async function buildDrawOps(p) {
       if (x2 > gMaxX) gMaxX = x2;
       if (y2 > gMaxY) gMaxY = y2;
       if (p.shadow && p.shadow.blur > 0) {
-        ops.push({
+        textOps.push({
           isShadow: true,
           op: "FillPath",
           path,
@@ -868,7 +897,7 @@ async function buildDrawOps(p) {
         });
       }
       if (p.stroke && p.stroke.width > 0) {
-        ops.push({
+        textOps.push({
           op: "StrokePath",
           path,
           x: glyphX,
@@ -879,7 +908,7 @@ async function buildDrawOps(p) {
           opacity: p.stroke.opacity
         });
       }
-      ops.push({
+      textOps.push({
         op: "FillPath",
         path,
         x: glyphX,
@@ -896,7 +925,7 @@ async function buildDrawOps(p) {
         lineWidth: line.width,
         xStart: lineX
       });
-      ops.push({
+      textOps.push({
         op: "DecorationLine",
         from: { x: deco.x1, y: deco.y },
         to: { x: deco.x2, y: deco.y },
@@ -908,12 +937,46 @@ async function buildDrawOps(p) {
   }
   if (gMinX !== Infinity) {
     const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
-    for (const op of ops) {
+    for (const op of textOps) {
       if (op.op === "FillPath" && !op.isShadow) {
         op.gradientBBox = gbox;
       }
     }
   }
+  if (p.background && (p.background.color || p.background.border)) {
+    const bgX = 0;
+    const bgY = 0;
+    const bgWidth = p.canvas.width;
+    const bgHeight = p.canvas.height;
+    if (p.background.color) {
+      ops.push({
+        op: "Rectangle",
+        x: bgX,
+        y: bgY,
+        width: bgWidth,
+        height: bgHeight,
+        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
+        borderRadius: p.background.borderRadius
+      });
+    }
+    if (p.background.border && p.background.border.width > 0) {
+      const halfBorder = p.background.border.width / 2;
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - p.background.border.width,
+        height: bgHeight - p.background.border.width,
+        stroke: {
+          width: p.background.border.width,
+          color: p.background.border.color,
+          opacity: p.background.border.opacity
+        },
+        borderRadius: Math.max(0, p.background.borderRadius - halfBorder)
+      });
+    }
+  }
+  ops.push(...textOps);
   return ops;
 }
 function tokenizePath(d) {
@@ -1723,6 +1786,44 @@ async function createNodePainter(opts) {
           });
           continue;
         }
+        if (op.op === "Rectangle") {
+          renderToBoth((context) => {
+            context.save();
+            const fill = makeGradientFromBBox(context, op.fill, {
+              x: op.x,
+              y: op.y,
+              w: op.width,
+              h: op.height
+            });
+            context.fillStyle = fill;
+            if (op.borderRadius && op.borderRadius > 0) {
+              context.beginPath();
+              roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
+              context.fill();
+            } else {
+              context.fillRect(op.x, op.y, op.width, op.height);
+            }
+            context.restore();
+          });
+          continue;
+        }
+        if (op.op === "RectangleStroke") {
+          renderToBoth((context) => {
+            context.save();
+            const c = parseHex6(op.stroke.color, op.stroke.opacity);
+            context.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+            context.lineWidth = op.stroke.width;
+            if (op.borderRadius && op.borderRadius > 0) {
+              context.beginPath();
+              roundRectPath(context, op.x, op.y, op.width, op.height, op.borderRadius);
+              context.stroke();
+            } else {
+              context.strokeRect(op.x, op.y, op.width, op.height);
+            }
+            context.restore();
+          });
+          continue;
+        }
       }
       if (needsAlphaExtraction) {
         const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -2286,14 +2387,15 @@ async function createTextEngine(opts = {}) {
             `Failed to layout text: ${err instanceof Error ? err.message : String(err)}`
           );
         }
+        const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
         const textRect = {
           x: 0,
           y: 0,
           width: asset.width ?? width,
           height: asset.height ?? height
         };
-        const canvasW = asset.width ?? width;
-        const canvasH = asset.height ?? height;
+        const canvasW = (asset.width ?? width) + padding.left + padding.right;
+        const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
         const canvasPR = asset.pixelRatio ?? pixelRatio;
         let ops0;
         try {
@@ -2320,6 +2422,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });

package/dist/entry.web.d.ts

@@ -64,6 +64,17 @@ type RichTextValidated = Required<{
         color?: string;
         opacity: number;
         borderRadius: number;
+        border?: {
+            width: number;
+            color: string;
+            opacity: number;
+        };
+    };
+    padding?: number | {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
     };
     align?: {
         horizontal: "left" | "center" | "right";
@@ -177,6 +188,26 @@ type DrawOp = {
     width: number;
     color: string;
     opacity: number;
+} | {
+    op: "Rectangle";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill: GradientSpec;
+    borderRadius?: number;
+} | {
+    op: "RectangleStroke";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    stroke: {
+        width: number;
+        color: string;
+        opacity: number;
+    };
+    borderRadius?: number;
 };
 type EngineInit = {
     width: number;

package/dist/entry.web.js

@@ -98,11 +98,26 @@ var animationSchema = Joi.object({
     otherwise: Joi.forbidden()
   })
 }).unknown(false);
+var borderSchema = Joi.object({
+  width: Joi.number().min(0).default(0),
+  color: Joi.string().pattern(HEX6).default("#000000"),
+  opacity: Joi.number().min(0).max(1).default(1)
+}).unknown(false);
 var backgroundSchema = Joi.object({
   color: Joi.string().pattern(HEX6).optional(),
   opacity: Joi.number().min(0).max(1).default(1),
-  borderRadius: Joi.number().min(0).default(0)
+  borderRadius: Joi.number().min(0).default(0),
+  border: borderSchema.optional()
 }).unknown(false);
+var paddingSchema = Joi.alternatives().try(
+  Joi.number().min(0).default(0),
+  Joi.object({
+    top: Joi.number().min(0).default(0),
+    right: Joi.number().min(0).default(0),
+    bottom: Joi.number().min(0).default(0),
+    left: Joi.number().min(0).default(0)
+  }).unknown(false)
+);
 var customFontSchema = Joi.object({
   src: Joi.string().uri().required(),
   family: Joi.string().required(),
@@ -120,6 +135,7 @@ var RichTextAssetSchema = Joi.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
   customFonts: Joi.array().items(customFontSchema).optional(),
@@ -794,15 +810,27 @@ function decorationGeometry(kind, p) {
 }
 
 // src/core/drawops.ts
+function normalizePadding(padding) {
+  if (padding === void 0 || padding === null) {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }
+  if (typeof padding === "number") {
+    return { top: padding, right: padding, bottom: padding, left: padding };
+  }
+  return padding;
+}
 async function buildDrawOps(p) {
   const ops = [];
+  const padding = normalizePadding(p.padding);
+  const borderWidth = p.background?.border?.width ?? 0;
   ops.push({
     op: "BeginFrame",
     width: p.canvas.width,
     height: p.canvas.height,
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
-    bg: p.background && p.background.color ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius } : void 0
+    bg: void 0
+    // Background will be drawn as a separate layer with proper padding/border
   });
   if (p.lines.length === 0) return ops;
   const upem = Math.max(1, await p.getUnitsPerEm());
@@ -812,33 +840,34 @@ async function buildDrawOps(p) {
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size;
+      blockY = p.font.size + padding.top;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
+  const textOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = 0;
+        lineX = padding.left;
         break;
       case "right":
-        lineX = p.textRect.width - line.width;
+        lineX = p.textRect.width - line.width + padding.left;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2;
+        lineX = (p.textRect.width - line.width) / 2 + padding.left;
         break;
     }
     let xCursor = lineX;
@@ -862,7 +891,7 @@ async function buildDrawOps(p) {
       if (x2 > gMaxX) gMaxX = x2;
       if (y2 > gMaxY) gMaxY = y2;
       if (p.shadow && p.shadow.blur > 0) {
-        ops.push({
+        textOps.push({
           isShadow: true,
           op: "FillPath",
           path,
@@ -873,7 +902,7 @@ async function buildDrawOps(p) {
         });
       }
       if (p.stroke && p.stroke.width > 0) {
-        ops.push({
+        textOps.push({
           op: "StrokePath",
           path,
           x: glyphX,
@@ -884,7 +913,7 @@ async function buildDrawOps(p) {
           opacity: p.stroke.opacity
         });
       }
-      ops.push({
+      textOps.push({
         op: "FillPath",
         path,
         x: glyphX,
@@ -901,7 +930,7 @@ async function buildDrawOps(p) {
         lineWidth: line.width,
         xStart: lineX
       });
-      ops.push({
+      textOps.push({
         op: "DecorationLine",
         from: { x: deco.x1, y: deco.y },
         to: { x: deco.x2, y: deco.y },
@@ -913,12 +942,46 @@ async function buildDrawOps(p) {
   }
   if (gMinX !== Infinity) {
     const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
-    for (const op of ops) {
+    for (const op of textOps) {
       if (op.op === "FillPath" && !op.isShadow) {
         op.gradientBBox = gbox;
       }
     }
   }
+  if (p.background && (p.background.color || p.background.border)) {
+    const bgX = 0;
+    const bgY = 0;
+    const bgWidth = p.canvas.width;
+    const bgHeight = p.canvas.height;
+    if (p.background.color) {
+      ops.push({
+        op: "Rectangle",
+        x: bgX,
+        y: bgY,
+        width: bgWidth,
+        height: bgHeight,
+        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
+        borderRadius: p.background.borderRadius
+      });
+    }
+    if (p.background.border && p.background.border.width > 0) {
+      const halfBorder = p.background.border.width / 2;
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - p.background.border.width,
+        height: bgHeight - p.background.border.width,
+        stroke: {
+          width: p.background.border.width,
+          color: p.background.border.color,
+          opacity: p.background.border.opacity
+        },
+        borderRadius: Math.max(0, p.background.borderRadius - halfBorder)
+      });
+    }
+  }
+  ops.push(...textOps);
   return ops;
 }
 function tokenizePath(d) {
@@ -1676,6 +1739,48 @@ function createWebPainter(canvas) {
           ctx.restore();
           continue;
         }
+        if (op.op === "Rectangle") {
+          ctx.save();
+          const fill = makeGradientFromBBox(ctx, op.fill, {
+            x: op.x,
+            y: op.y,
+            w: op.width,
+            h: op.height
+          });
+          ctx.fillStyle = fill;
+          if (op.borderRadius && op.borderRadius > 0) {
+            drawRoundedRect(ctx, op.x, op.y, op.width, op.height, op.borderRadius);
+          } else {
+            ctx.fillRect(op.x, op.y, op.width, op.height);
+          }
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "RectangleStroke") {
+          ctx.save();
+          const c = parseHex6(op.stroke.color, op.stroke.opacity);
+          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+          ctx.lineWidth = op.stroke.width;
+          if (op.borderRadius && op.borderRadius > 0) {
+            const p = new Path2D();
+            const r = op.borderRadius;
+            const x = op.x;
+            const y = op.y;
+            const w = op.width;
+            const h = op.height;
+            p.moveTo(x + r, y);
+            p.arcTo(x + w, y, x + w, y + h, r);
+            p.arcTo(x + w, y + h, x, y + h, r);
+            p.arcTo(x, y + h, x, y, r);
+            p.arcTo(x, y, x + w, y, r);
+            p.closePath();
+            ctx.stroke(p);
+          } else {
+            ctx.strokeRect(op.x, op.y, op.width, op.height);
+          }
+          ctx.restore();
+          continue;
+        }
       }
     }
   };
@@ -2005,14 +2110,15 @@ async function createTextEngine(opts = {}) {
             `Failed to layout text: ${err instanceof Error ? err.message : String(err)}`
           );
         }
+        const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
         const textRect = {
           x: 0,
           y: 0,
           width: asset.width ?? width,
           height: asset.height ?? height
         };
-        const canvasW = asset.width ?? width;
-        const canvasH = asset.height ?? height;
+        const canvasW = (asset.width ?? width) + padding.left + padding.right;
+        const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
         const canvasPR = asset.pixelRatio ?? pixelRatio;
         let ops0;
         try {
@@ -2039,6 +2145,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });

package/package.json

@@ -1,62 +1,62 @@
-{
-  "name": "@shotstack/shotstack-canvas",
-  "version": "1.4.7",
-  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
-  "type": "module",
-  "main": "./dist/entry.node.cjs",
-  "module": "./dist/entry.node.js",
-  "browser": "./dist/entry.web.js",
-  "types": "./dist/entry.node.d.ts",
-  "exports": {
-    ".": {
-      "node": {
-        "import": "./dist/entry.node.js",
-        "require": "./dist/entry.node.cjs"
-      },
-      "browser": "./dist/entry.web.js",
-      "default": "./dist/entry.web.js"
-    }
-  },
-  "files": [
-    "dist/**",
-    "scripts/postinstall.js",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "postinstall": "node scripts/postinstall.js",
-    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
-    "example:node": "node examples/node-example.mjs",
-    "example:video": "node examples/node-video.mjs",
-    "example:web": "vite dev examples/web-example",
-    "prepublishOnly": "npm run build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "canvas": "npm:@napi-rs/canvas@^0.1.54",
-    "ffmpeg-static": "^5.2.0",
-    "fontkit": "^2.0.4",
-    "harfbuzzjs": "0.4.12",
-    "joi": "^17.13.3",
-    "opentype.js": "^1.3.4"
-  },
-  "devDependencies": {
-    "@types/fluent-ffmpeg": "2.1.27",
-    "@types/node": "^20.14.10",
-    "fluent-ffmpeg": "^2.1.3",
-    "tsup": "^8.2.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vite-plugin-top-level-await": "1.6.0",
-    "vite-plugin-wasm": "3.5.0"
-  }
-}
+{
+  "name": "@shotstack/shotstack-canvas",
+  "version": "1.5.0",
+  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
+  "type": "module",
+  "main": "./dist/entry.node.cjs",
+  "module": "./dist/entry.node.js",
+  "browser": "./dist/entry.web.js",
+  "types": "./dist/entry.node.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/entry.node.js",
+        "require": "./dist/entry.node.cjs"
+      },
+      "browser": "./dist/entry.web.js",
+      "default": "./dist/entry.web.js"
+    }
+  },
+  "files": [
+    "dist/**",
+    "scripts/postinstall.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "postinstall": "node scripts/postinstall.js",
+    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
+    "example:node": "node examples/node-example.mjs",
+    "example:video": "node examples/node-video.mjs",
+    "example:web": "vite dev examples/web-example",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "canvas": "npm:@napi-rs/canvas@^0.1.54",
+    "ffmpeg-static": "^5.2.0",
+    "fontkit": "^2.0.4",
+    "harfbuzzjs": "0.4.12",
+    "joi": "^17.13.3",
+    "opentype.js": "^1.3.4"
+  },
+  "devDependencies": {
+    "@types/fluent-ffmpeg": "2.1.27",
+    "@types/node": "^20.14.10",
+    "fluent-ffmpeg": "^2.1.3",
+    "tsup": "^8.2.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-top-level-await": "1.6.0",
+    "vite-plugin-wasm": "3.5.0"
+  }
+}