@shotstack/shotstack-canvas 1.5.4 → 1.5.6

package/dist/entry.node.cjs

@@ -135,13 +135,12 @@ var animationSchema = import_joi.default.object({
 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)
+  opacity: import_joi.default.number().min(0).max(1).default(1),
+  radius: import_joi.default.number().min(0).default(0)
 }).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),
-  border: borderSchema.optional()
+  opacity: import_joi.default.number().min(0).max(1).default(1)
 }).unknown(false);
 var paddingSchema = import_joi.default.alternatives().try(
   import_joi.default.number().min(0).default(0),
@@ -169,6 +168,7 @@ var RichTextAssetSchema = import_joi.default.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  border: borderSchema.optional(),
   padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
@@ -980,54 +980,42 @@ async function buildDrawOps(p) {
       }
     }
   }
-  if (p.background && (p.background.color || p.background.border)) {
+  if (p.background || p.border) {
     const bgX = 0;
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
-    if (p.background.color) {
+    const borderWidth2 = p.border?.width ?? 0;
+    const borderRadius = p.border?.radius ?? 0;
+    const halfBorder = borderWidth2 / 2;
+    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const outerRadius = Math.min(borderRadius, maxRadius);
+    const innerRadius = Math.max(0, outerRadius - halfBorder);
+    if (p.background?.color) {
       ops.push({
         op: "Rectangle",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        x: bgX + borderWidth2,
+        y: bgY + borderWidth2,
+        width: bgWidth - borderWidth2 * 2,
+        height: bgHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: p.background.borderRadius
+        borderRadius: innerRadius
       });
     }
-    if (p.background.border && p.background.border.width > 0) {
-      const halfBorder = p.background.border.width / 2;
-      const borderRadius = p.background.borderRadius;
-      if (borderRadius <= halfBorder) {
-        ops.push({
-          op: "RectangleStroke",
-          x: bgX,
-          y: bgY,
-          width: bgWidth,
-          height: bgHeight,
-          stroke: {
-            width: p.background.border.width,
-            color: p.background.border.color,
-            opacity: p.background.border.opacity
-          },
-          borderRadius
-        });
-      } else {
-        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: borderRadius - halfBorder
-        });
-      }
+    if (p.border && p.border.width > 0) {
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - borderWidth2,
+        height: bgHeight - borderWidth2,
+        stroke: {
+          width: p.border.width,
+          color: p.border.color,
+          opacity: p.border.opacity
+        },
+        borderRadius: outerRadius
+      });
     }
   }
   ops.push(...textOps);
@@ -2083,11 +2071,13 @@ function computePathBounds2(d) {
   };
 }
 function roundRectPath(ctx, x, y, w, h, r) {
-  ctx.moveTo(x + r, y);
-  ctx.arcTo(x + w, y, x + w, y + h, r);
-  ctx.arcTo(x + w, y + h, x, y + h, r);
-  ctx.arcTo(x, y + h, x, y, r);
-  ctx.arcTo(x, y, x + w, y, r);
+  const maxRadius = Math.min(w, h) / 2;
+  const radius = 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);
+  ctx.arcTo(x, y + h, x, y, radius);
+  ctx.arcTo(x, y, x + w, y, radius);
   ctx.closePath();
 }
 function tokenizePath2(d) {
@@ -2476,6 +2466,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
@@ -2528,7 +2519,7 @@ async function createTextEngine(opts = {}) {
       try {
         const hasBackground = !!asset.background?.color;
         const hasAnimation = !!asset.animation?.preset;
-        const hasBorderRadius = (asset.background?.borderRadius ?? 0) > 0;
+        const hasBorderRadius = (asset.border?.radius ?? 0) > 0;
         const needsAlpha = !hasBackground && hasAnimation || hasBorderRadius;
         console.log(
           `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`

package/dist/entry.node.d.cts

@@ -63,12 +63,12 @@ type RichTextValidated = Required<{
     background?: {
         color?: string;
         opacity: number;
-        borderRadius: number;
-        border?: {
-            width: number;
-            color: string;
-            opacity: number;
-        };
+    };
+    border?: {
+        width: number;
+        color: string;
+        opacity: number;
+        radius: number;
     };
     padding?: number | {
         top: number;

package/dist/entry.node.d.ts

@@ -63,12 +63,12 @@ type RichTextValidated = Required<{
     background?: {
         color?: string;
         opacity: number;
-        borderRadius: number;
-        border?: {
-            width: number;
-            color: string;
-            opacity: number;
-        };
+    };
+    border?: {
+        width: number;
+        color: string;
+        opacity: number;
+        radius: number;
     };
     padding?: number | {
         top: number;

package/dist/entry.node.js

@@ -97,13 +97,12 @@ var animationSchema = Joi.object({
 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)
+  opacity: Joi.number().min(0).max(1).default(1),
+  radius: Joi.number().min(0).default(0)
 }).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),
-  border: borderSchema.optional()
+  opacity: Joi.number().min(0).max(1).default(1)
 }).unknown(false);
 var paddingSchema = Joi.alternatives().try(
   Joi.number().min(0).default(0),
@@ -131,6 +130,7 @@ var RichTextAssetSchema = Joi.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  border: borderSchema.optional(),
   padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
@@ -941,54 +941,42 @@ async function buildDrawOps(p) {
       }
     }
   }
-  if (p.background && (p.background.color || p.background.border)) {
+  if (p.background || p.border) {
     const bgX = 0;
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
-    if (p.background.color) {
+    const borderWidth2 = p.border?.width ?? 0;
+    const borderRadius = p.border?.radius ?? 0;
+    const halfBorder = borderWidth2 / 2;
+    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const outerRadius = Math.min(borderRadius, maxRadius);
+    const innerRadius = Math.max(0, outerRadius - halfBorder);
+    if (p.background?.color) {
       ops.push({
         op: "Rectangle",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        x: bgX + borderWidth2,
+        y: bgY + borderWidth2,
+        width: bgWidth - borderWidth2 * 2,
+        height: bgHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: p.background.borderRadius
+        borderRadius: innerRadius
       });
     }
-    if (p.background.border && p.background.border.width > 0) {
-      const halfBorder = p.background.border.width / 2;
-      const borderRadius = p.background.borderRadius;
-      if (borderRadius <= halfBorder) {
-        ops.push({
-          op: "RectangleStroke",
-          x: bgX,
-          y: bgY,
-          width: bgWidth,
-          height: bgHeight,
-          stroke: {
-            width: p.background.border.width,
-            color: p.background.border.color,
-            opacity: p.background.border.opacity
-          },
-          borderRadius
-        });
-      } else {
-        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: borderRadius - halfBorder
-        });
-      }
+    if (p.border && p.border.width > 0) {
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - borderWidth2,
+        height: bgHeight - borderWidth2,
+        stroke: {
+          width: p.border.width,
+          color: p.border.color,
+          opacity: p.border.opacity
+        },
+        borderRadius: outerRadius
+      });
     }
   }
   ops.push(...textOps);
@@ -2044,11 +2032,13 @@ function computePathBounds2(d) {
   };
 }
 function roundRectPath(ctx, x, y, w, h, r) {
-  ctx.moveTo(x + r, y);
-  ctx.arcTo(x + w, y, x + w, y + h, r);
-  ctx.arcTo(x + w, y + h, x, y + h, r);
-  ctx.arcTo(x, y + h, x, y, r);
-  ctx.arcTo(x, y, x + w, y, r);
+  const maxRadius = Math.min(w, h) / 2;
+  const radius = 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);
+  ctx.arcTo(x, y + h, x, y, radius);
+  ctx.arcTo(x, y, x + w, y, radius);
   ctx.closePath();
 }
 function tokenizePath2(d) {
@@ -2437,6 +2427,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
@@ -2489,7 +2480,7 @@ async function createTextEngine(opts = {}) {
       try {
         const hasBackground = !!asset.background?.color;
         const hasAnimation = !!asset.animation?.preset;
-        const hasBorderRadius = (asset.background?.borderRadius ?? 0) > 0;
+        const hasBorderRadius = (asset.border?.radius ?? 0) > 0;
         const needsAlpha = !hasBackground && hasAnimation || hasBorderRadius;
         console.log(
           `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`

package/dist/entry.web.d.ts

@@ -63,12 +63,12 @@ type RichTextValidated = Required<{
     background?: {
         color?: string;
         opacity: number;
-        borderRadius: number;
-        border?: {
-            width: number;
-            color: string;
-            opacity: number;
-        };
+    };
+    border?: {
+        width: number;
+        color: string;
+        opacity: number;
+        radius: number;
     };
     padding?: number | {
         top: number;

package/dist/entry.web.js

@@ -101,13 +101,12 @@ var animationSchema = Joi.object({
 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)
+  opacity: Joi.number().min(0).max(1).default(1),
+  radius: Joi.number().min(0).default(0)
 }).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),
-  border: borderSchema.optional()
+  opacity: Joi.number().min(0).max(1).default(1)
 }).unknown(false);
 var paddingSchema = Joi.alternatives().try(
   Joi.number().min(0).default(0),
@@ -135,6 +134,7 @@ var RichTextAssetSchema = Joi.object({
   stroke: strokeSchema.optional(),
   shadow: shadowSchema.optional(),
   background: backgroundSchema.optional(),
+  border: borderSchema.optional(),
   padding: paddingSchema.optional(),
   align: alignmentSchema.optional(),
   animation: animationSchema.optional(),
@@ -946,54 +946,42 @@ async function buildDrawOps(p) {
       }
     }
   }
-  if (p.background && (p.background.color || p.background.border)) {
+  if (p.background || p.border) {
     const bgX = 0;
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
-    if (p.background.color) {
+    const borderWidth2 = p.border?.width ?? 0;
+    const borderRadius = p.border?.radius ?? 0;
+    const halfBorder = borderWidth2 / 2;
+    const maxRadius = Math.min(bgWidth - borderWidth2, bgHeight - borderWidth2) / 2;
+    const outerRadius = Math.min(borderRadius, maxRadius);
+    const innerRadius = Math.max(0, outerRadius - halfBorder);
+    if (p.background?.color) {
       ops.push({
         op: "Rectangle",
-        x: bgX,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        x: bgX + borderWidth2,
+        y: bgY + borderWidth2,
+        width: bgWidth - borderWidth2 * 2,
+        height: bgHeight - borderWidth2 * 2,
         fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: p.background.borderRadius
+        borderRadius: innerRadius
       });
     }
-    if (p.background.border && p.background.border.width > 0) {
-      const halfBorder = p.background.border.width / 2;
-      const borderRadius = p.background.borderRadius;
-      if (borderRadius <= halfBorder) {
-        ops.push({
-          op: "RectangleStroke",
-          x: bgX,
-          y: bgY,
-          width: bgWidth,
-          height: bgHeight,
-          stroke: {
-            width: p.background.border.width,
-            color: p.background.border.color,
-            opacity: p.background.border.opacity
-          },
-          borderRadius
-        });
-      } else {
-        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: borderRadius - halfBorder
-        });
-      }
+    if (p.border && p.border.width > 0) {
+      ops.push({
+        op: "RectangleStroke",
+        x: bgX + halfBorder,
+        y: bgY + halfBorder,
+        width: bgWidth - borderWidth2,
+        height: bgHeight - borderWidth2,
+        stroke: {
+          width: p.border.width,
+          color: p.border.color,
+          opacity: p.border.opacity
+        },
+        borderRadius: outerRadius
+      });
     }
   }
   ops.push(...textOps);
@@ -1778,11 +1766,12 @@ function createWebPainter(canvas) {
           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;
+            const maxRadius = Math.min(w, h) / 2;
+            const r = Math.min(op.borderRadius, maxRadius);
             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);
@@ -1801,12 +1790,14 @@ function createWebPainter(canvas) {
   };
 }
 function drawRoundedRect(ctx, x, y, w, h, r) {
+  const maxRadius = Math.min(w, h) / 2;
+  const radius = Math.min(r, maxRadius);
   const p = new Path2D();
-  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.moveTo(x + radius, y);
+  p.arcTo(x + w, y, x + w, y + h, radius);
+  p.arcTo(x + w, y + h, x, y + h, radius);
+  p.arcTo(x, y + h, x, y, radius);
+  p.arcTo(x, y, x + w, y, radius);
   p.closePath();
   ctx.save();
   ctx.fill(p);
@@ -2160,6 +2151,7 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
+            border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
             getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)

package/package.json

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