@shotstack/shotstack-canvas 1.5.3 → 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,31 +988,35 @@ 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,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        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: p.background.borderRadius
+        borderRadius: bgFillRadius
       });
     }
     if (p.background.border && p.background.border.width > 0) {
-      const halfBorder = p.background.border.width / 2;
+      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
       ops.push({
         op: "RectangleStroke",
-        x: bgX + halfBorder,
-        y: bgY + halfBorder,
-        width: bgWidth - p.background.border.width,
-        height: bgHeight - p.background.border.width,
+        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: Math.max(0, p.background.borderRadius - halfBorder)
+        borderRadius
       });
     }
   }
@@ -2066,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,31 +949,35 @@ 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,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        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: p.background.borderRadius
+        borderRadius: bgFillRadius
       });
     }
     if (p.background.border && p.background.border.width > 0) {
-      const halfBorder = p.background.border.width / 2;
+      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
       ops.push({
         op: "RectangleStroke",
-        x: bgX + halfBorder,
-        y: bgY + halfBorder,
-        width: bgWidth - p.background.border.width,
-        height: bgHeight - p.background.border.width,
+        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: Math.max(0, p.background.borderRadius - halfBorder)
+        borderRadius
       });
     }
   }
@@ -2027,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,31 +954,35 @@ 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,
-        y: bgY,
-        width: bgWidth,
-        height: bgHeight,
+        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: p.background.borderRadius
+        borderRadius: bgFillRadius
       });
     }
     if (p.background.border && p.background.border.width > 0) {
-      const halfBorder = p.background.border.width / 2;
+      const borderRadius = p.background.border.borderRadius !== void 0 ? p.background.border.borderRadius : backgroundRadius;
       ops.push({
         op: "RectangleStroke",
-        x: bgX + halfBorder,
-        y: bgY + halfBorder,
-        width: bgWidth - p.background.border.width,
-        height: bgHeight - p.background.border.width,
+        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: Math.max(0, p.background.borderRadius - halfBorder)
+        borderRadius
       });
     }
   }
@@ -1761,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);
@@ -1784,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.3",
+  "version": "1.5.5",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",