@shotstack/shotstack-canvas 1.5.4 → 1.5.5

package/dist/entry.node.cjs

@@ -135,12 +135,15 @@ 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),
+  borderRadius: import_joi.default.number().min(0).optional()
 }).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),
+  backgroundRadius: import_joi.default.number().min(0).default(0),
+  borderRadius: import_joi.default.number().min(0).optional(),
+  // Deprecated: use backgroundRadius
   border: borderSchema.optional()
 }).unknown(false);
 var paddingSchema = import_joi.default.alternatives().try(
@@ -985,50 +988,37 @@ async function buildDrawOps(p) {
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
+    const backgroundRadius = p.background.backgroundRadius ?? p.background.borderRadius ?? 0;
+    const halfBorder = p.background.border?.width ? p.background.border.width / 2 : 0;
     if (p.background.color) {
+      const bgInset = halfBorder;
+      const bgFillRadius = Math.max(0, backgroundRadius - bgInset);
       ops.push({
         op: "Rectangle",
+        x: bgX + bgInset,
+        y: bgY + bgInset,
+        width: bgWidth - bgInset * 2,
+        height: bgHeight - bgInset * 2,
+        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
+        borderRadius: bgFillRadius
+      });
+    }
+    if (p.background.border && p.background.border.width > 0) {
+      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
+      ops.push({
+        op: "RectangleStroke",
         x: bgX,
         y: bgY,
         width: bgWidth,
         height: bgHeight,
-        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: p.background.borderRadius
+        stroke: {
+          width: p.background.border.width,
+          color: p.background.border.color,
+          opacity: p.background.border.opacity
+        },
+        borderRadius
       });
     }
-    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
-        });
-      }
-    }
   }
   ops.push(...textOps);
   return ops;
@@ -2083,11 +2073,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) {

package/dist/entry.node.d.cts

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

package/dist/entry.node.d.ts

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

package/dist/entry.node.js

@@ -97,12 +97,15 @@ 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),
+  borderRadius: Joi.number().min(0).optional()
 }).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),
+  backgroundRadius: Joi.number().min(0).default(0),
+  borderRadius: Joi.number().min(0).optional(),
+  // Deprecated: use backgroundRadius
   border: borderSchema.optional()
 }).unknown(false);
 var paddingSchema = Joi.alternatives().try(
@@ -946,50 +949,37 @@ async function buildDrawOps(p) {
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
+    const backgroundRadius = p.background.backgroundRadius ?? p.background.borderRadius ?? 0;
+    const halfBorder = p.background.border?.width ? p.background.border.width / 2 : 0;
     if (p.background.color) {
+      const bgInset = halfBorder;
+      const bgFillRadius = Math.max(0, backgroundRadius - bgInset);
       ops.push({
         op: "Rectangle",
+        x: bgX + bgInset,
+        y: bgY + bgInset,
+        width: bgWidth - bgInset * 2,
+        height: bgHeight - bgInset * 2,
+        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
+        borderRadius: bgFillRadius
+      });
+    }
+    if (p.background.border && p.background.border.width > 0) {
+      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
+      ops.push({
+        op: "RectangleStroke",
         x: bgX,
         y: bgY,
         width: bgWidth,
         height: bgHeight,
-        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: p.background.borderRadius
+        stroke: {
+          width: p.background.border.width,
+          color: p.background.border.color,
+          opacity: p.background.border.opacity
+        },
+        borderRadius
       });
     }
-    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
-        });
-      }
-    }
   }
   ops.push(...textOps);
   return ops;
@@ -2044,11 +2034,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) {

package/dist/entry.web.d.ts

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

package/dist/entry.web.js

@@ -101,12 +101,15 @@ 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),
+  borderRadius: Joi.number().min(0).optional()
 }).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),
+  backgroundRadius: Joi.number().min(0).default(0),
+  borderRadius: Joi.number().min(0).optional(),
+  // Deprecated: use backgroundRadius
   border: borderSchema.optional()
 }).unknown(false);
 var paddingSchema = Joi.alternatives().try(
@@ -951,50 +954,37 @@ async function buildDrawOps(p) {
     const bgY = 0;
     const bgWidth = p.canvas.width;
     const bgHeight = p.canvas.height;
+    const backgroundRadius = p.background.backgroundRadius ?? p.background.borderRadius ?? 0;
+    const halfBorder = p.background.border?.width ? p.background.border.width / 2 : 0;
     if (p.background.color) {
+      const bgInset = halfBorder;
+      const bgFillRadius = Math.max(0, backgroundRadius - bgInset);
       ops.push({
         op: "Rectangle",
+        x: bgX + bgInset,
+        y: bgY + bgInset,
+        width: bgWidth - bgInset * 2,
+        height: bgHeight - bgInset * 2,
+        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
+        borderRadius: bgFillRadius
+      });
+    }
+    if (p.background.border && p.background.border.width > 0) {
+      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
+      ops.push({
+        op: "RectangleStroke",
         x: bgX,
         y: bgY,
         width: bgWidth,
         height: bgHeight,
-        fill: { kind: "solid", color: p.background.color, opacity: p.background.opacity },
-        borderRadius: p.background.borderRadius
+        stroke: {
+          width: p.background.border.width,
+          color: p.background.border.color,
+          opacity: p.background.border.opacity
+        },
+        borderRadius
       });
     }
-    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
-        });
-      }
-    }
   }
   ops.push(...textOps);
   return ops;
@@ -1778,11 +1768,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 +1792,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);

package/package.json

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