apexify.js 4.6.2 → 4.6.3

package/dist/esm/canvas/utils/Image/imageProperties.d.ts

@@ -22,8 +22,7 @@ export declare function applyZoom(ctx: SKRSContext2D, zoom?: {
 }): void;
 /**
  * Applies stroke to the canvas context with support for selective side strokes.
- * If stroke.borderPosition is "all", it uses the full rounded path.
- * Otherwise, it constructs individual segments for the specified sides.
+ * Supports optional blur effect on the stroke.
  *
  * @param ctx The canvas rendering context.
  * @param stroke The stroke properties.
@@ -31,14 +30,9 @@ export declare function applyZoom(ctx: SKRSContext2D, zoom?: {
  * @param y The y-coordinate of the shape.
  * @param width The width of the shape.
  * @param height The height of the shape.
+ * @param blur Optional blur effect on the stroke.
  */
-export declare function applyStroke(ctx: SKRSContext2D, stroke: ImageProperties['stroke'], x: number, y: number, width: number, height: number): void;
-/**
- * Draws a shape on the canvas context based on the provided settings.
- * Supports built‑in shapes as well as a custom polygon.
- * @param ctx - The canvas rendering context.
- * @param shapeSettings - The settings for the shape.
- */
+export declare function applyStroke(ctx: SKRSContext2D, stroke: ImageProperties["stroke"], x: number, y: number, width: number, height: number, shapeName?: string, isImage?: boolean): void;
 export declare function drawShape(ctx: SKRSContext2D, shapeSettings: any): void;
 export declare function createGradient(ctx: any, gradientOptions: any, startX: number, startY: number, endX: number, endY: number): any;
 /**

package/dist/esm/canvas/utils/Image/imageProperties.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageProperties.d.ts","sourceRoot":"","sources":["../../../../../lib/canvas/utils/Image/imageProperties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACvB,GAAG,EAAE,aAAa,EAClB,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,EACjC,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,IAAI,CA8BN;AAEH;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,aAAa,EAClB,IAAI,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD,IAAI,CASN;AAEC;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,GAAG,EAAE,aAAa,EAClB,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,EACjC,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,IAAI,CA6BN;AAEH;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,GAAG,IAAI,CA0KtE;AA2BD,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OA6DxH;AAGD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CACzB,GAAG,EAAE,aAAa,EAClB,QAAQ,EAAE,MAAM,EAChB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACb,IAAI,CAMN;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CACzB,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,GAAG,EACV,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,GAAG,UAAU,EACjC,cAAc,GAAE,MAAc,GAC7B,IAAI,CA4DN;AAGH;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CACxB,GAAG,EAAE,aAAa,EAClB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,YAAY,GAAE,MAAM,GAAG,UAAgB,EACvC,cAAc,GAAE,MAAc,GAC7B,IAAI,CA6EN;AAyBH;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,gBAAgB,CACpC,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,KAAK,EACZ,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,WAAW,EAAE;IAAE,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,WAAW,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,UAAU,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAAE,EACpK,QAAQ,GAAE,MAAW,EACrB,QAAQ,GAAE,MAAW,GACpB,OAAO,CAAC,IAAI,CAAC,CA2Cf"}
+{"version":3,"file":"imageProperties.d.ts","sourceRoot":"","sources":["../../../../../lib/canvas/utils/Image/imageProperties.ts"],"names":[],"mappings":"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"}

package/dist/esm/canvas/utils/Image/imageProperties.js

@@ -25,9 +25,9 @@ function applyShadow(ctx, shadow, x, y, width, height) {
         ctx.filter = `blur(${shadow.blur ?? 0}px)`;
         const shadowX = x + (shadow.offsetX ?? 0);
         const shadowY = y + (shadow.offsetY ?? 0);
-        objectRadius(ctx, shadowX, shadowY, width, height, shadow.borderRadius ?? 2, shadow.borderPosition);
+        objectRadius(ctx, shadowX, shadowY, width, height, shadow.borderRadius ?? 2);
         ctx.fillStyle = shadow.gradient
-            ? createGradient(ctx, shadow.gradient, x, y, x + width, y + height)
+            ? createGradient(ctx, shadow.gradient, shadowX, shadowY, shadowX + width, shadowY + height)
             : shadow.color || "transparent";
         ctx.fill();
     }
@@ -52,8 +52,7 @@ function applyZoom(ctx, zoom) {
 }
 /**
  * Applies stroke to the canvas context with support for selective side strokes.
- * If stroke.borderPosition is "all", it uses the full rounded path.
- * Otherwise, it constructs individual segments for the specified sides.
+ * Supports optional blur effect on the stroke.
  *
  * @param ctx The canvas rendering context.
  * @param stroke The stroke properties.
@@ -61,38 +60,79 @@ function applyZoom(ctx, zoom) {
  * @param y The y-coordinate of the shape.
  * @param width The width of the shape.
  * @param height The height of the shape.
+ * @param blur Optional blur effect on the stroke.
  */
-function applyStroke(ctx, stroke, x, y, width, height) {
+function applyStroke(ctx, stroke, x, y, width, height, shapeName, isImage) {
     if (!stroke)
         return;
     ctx.save();
-    ctx.beginPath();
+    if (stroke.blur && stroke.blur > 0) {
+        ctx.filter = `blur(${stroke.blur}px)`;
+    }
     ctx.strokeStyle = stroke.gradient
         ? createGradient(ctx, stroke.gradient, x, y, x + width, y + height)
         : stroke.color || "transparent";
     ctx.lineWidth = stroke.width && stroke.width > 0 ? stroke.width : 2;
-    const positionOffset = stroke.position ?? 0;
-    const halfStroke = ctx.lineWidth / 2;
-    const totalOffset = positionOffset > 0 ? positionOffset + halfStroke : 0;
-    const adjustedBorderRadius = stroke.borderRadius === "circular"
-        ? "circular"
-        : (stroke.borderRadius ?? 2) + halfStroke;
-    const adjustedX = x - totalOffset;
-    const adjustedY = y - totalOffset;
-    const adjustedWidth = width + totalOffset * 2;
-    const adjustedHeight = height + totalOffset * 2;
-    objectRadius(ctx, adjustedX, adjustedY, adjustedWidth, adjustedHeight, adjustedBorderRadius, "all");
+    ctx.beginPath();
+    if (isImage) {
+        ctx.globalCompositeOperation = "source-atop";
+        ctx.rect(x, y, width, height);
+    }
+    else if (["heart", "arrow", "circle", "star", "pentagon", "hexagon", "heptagon", "octagon", "diamond", "trapezoid", "kite"].includes(shapeName)) {
+        switch (shapeName) {
+            case "circle":
+                ctx.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
+                break;
+            case "star":
+                drawStar(ctx, x, y, width, height);
+                break;
+            case "arrow":
+                drawArrow(ctx, x, y, width, height);
+                break;
+            case "pentagon":
+            case "hexagon":
+            case "heptagon":
+            case "octagon":
+                const sides = parseInt(shapeName.replace(/\D/g, ""), 10);
+                drawPolygon(ctx, x, y, width, height, sides);
+                break;
+            case "diamond":
+                ctx.moveTo(x + width / 2, y);
+                ctx.lineTo(x + width, y + height / 2);
+                ctx.lineTo(x + width / 2, y + height);
+                ctx.lineTo(x, y + height / 2);
+                ctx.closePath();
+                break;
+            case "trapezoid":
+                const topWidth = width * 0.6;
+                const offset = (width - topWidth) / 2;
+                ctx.moveTo(x + offset, y);
+                ctx.lineTo(x + offset + topWidth, y);
+                ctx.lineTo(x + width, y + height);
+                ctx.lineTo(x, y + height);
+                ctx.closePath();
+                break;
+            case "heart":
+                drawHeart(ctx, x, y, width, height);
+                break;
+            case "kite":
+                ctx.moveTo(x + width / 2, y);
+                ctx.lineTo(x + width, y + height / 2);
+                ctx.lineTo(x + width / 2, y + height);
+                ctx.lineTo(x, y + height / 2);
+                ctx.closePath();
+                break;
+        }
+    }
+    else {
+        objectRadius(ctx, x, y, width, height, stroke.borderRadius || 2, "all");
+    }
     ctx.stroke();
+    ctx.filter = "none";
     ctx.restore();
 }
-/**
- * Draws a shape on the canvas context based on the provided settings.
- * Supports built‑in shapes as well as a custom polygon.
- * @param ctx - The canvas rendering context.
- * @param shapeSettings - The settings for the shape.
- */
 function drawShape(ctx, shapeSettings) {
-    const { source, x, y, width, height, rotation = 0, borderRadius = 0, borderPosition = 'all', stroke, shadow, isFilled = false, color = "transparent", gradient, } = shapeSettings;
+    const { source, x, y, width, height, rotation = 0, borderRadius = 0, borderPosition = 'all', stroke, shadow, isFilled = false, color = "transparent", gradient, filling, } = shapeSettings;
     const shapeName = source.toLowerCase();
     ctx.save();
     applyRotation(ctx, rotation, x, y, width, height);
@@ -114,41 +154,16 @@ function drawShape(ctx, shapeSettings) {
             ctx.closePath();
             break;
         }
-        case 'pentagon': {
-            drawPolygon(ctx, x, y, width, height, 5);
-            break;
-        }
-        case 'hexagon': {
-            drawPolygon(ctx, x, y, width, height, 6);
-            break;
-        }
-        case 'heptagon': {
-            drawPolygon(ctx, x, y, width, height, 7);
-            break;
-        }
+        case 'pentagon':
+        case 'hexagon':
+        case 'heptagon':
         case 'octagon': {
-            drawPolygon(ctx, x, y, width, height, 8);
+            const sides = parseInt(shapeName.replace(/\D/g, ""), 10);
+            drawPolygon(ctx, x, y, width, height, sides);
             break;
         }
         case 'star': {
-            {
-                const cx = x + width / 2;
-                const cy = y + height / 2;
-                const outerRadius = Math.min(width, height) / 2;
-                const innerRadius = outerRadius / 2;
-                const step = Math.PI / 5;
-                for (let i = 0; i < 10; i++) {
-                    const r = i % 2 === 0 ? outerRadius : innerRadius;
-                    const angle = i * step - Math.PI / 2;
-                    if (i === 0) {
-                        ctx.moveTo(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
-                    }
-                    else {
-                        ctx.lineTo(cx + r * Math.cos(angle), cy + r * Math.sin(angle));
-                    }
-                }
-                ctx.closePath();
-            }
+            drawStar(ctx, x, y, width, height);
             break;
         }
         case 'kite': {
@@ -163,23 +178,12 @@ function drawShape(ctx, shapeSettings) {
             ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
             break;
         }
-        case 'heart': {
-            ctx.moveTo(x + width / 2, y + height * 0.75);
-            ctx.bezierCurveTo(x + width * 0.1, y + height * 0.5, x, y + height * 0.2, x + width / 2, y + height * 0.3);
-            ctx.bezierCurveTo(x + width, y + height * 0.2, x + width * 0.9, y + height * 0.5, x + width / 2, y + height * 0.75);
-            ctx.closePath();
+        case 'arrow': {
+            drawArrow(ctx, x, y, width, height);
             break;
         }
-        case 'arrow': {
-            const arrowHeadWidth = width * 0.3;
-            ctx.moveTo(x, y + height / 2);
-            ctx.lineTo(x + width - arrowHeadWidth, y + height / 2);
-            ctx.lineTo(x + width - arrowHeadWidth, y);
-            ctx.lineTo(x + width, y + height / 2);
-            ctx.lineTo(x + width - arrowHeadWidth, y + height);
-            ctx.lineTo(x + width - arrowHeadWidth, y + height / 2);
-            ctx.lineTo(x, y + height / 2);
-            ctx.closePath();
+        case 'heart': {
+            drawHeart(ctx, x, y, width, height);
             break;
         }
         case 'diamond': {
@@ -200,17 +204,6 @@ function drawShape(ctx, shapeSettings) {
             ctx.closePath();
             break;
         }
-        case 'cloud': {
-            const radius = width / 5;
-            ctx.moveTo(x + radius, y + height / 2);
-            ctx.arc(x + radius, y + height / 2, radius, Math.PI * 0.5, Math.PI * 1.5);
-            ctx.arc(x + width / 2, y + height / 2 - radius, radius, Math.PI, 0);
-            ctx.arc(x + width - radius, y + height / 2, radius, Math.PI * 1.5, Math.PI * 0.5);
-            ctx.lineTo(x + width, y + height);
-            ctx.lineTo(x, y + height);
-            ctx.closePath();
-            break;
-        }
         default: {
             ctx.restore();
             throw new Error(`Unsupported shape: ${shapeName}`);
@@ -220,42 +213,104 @@ function drawShape(ctx, shapeSettings) {
         if (borderRadius && shapeName !== 'circle' && shapeName !== 'oval') {
             objectRadius(ctx, x, y, width, height, borderRadius, borderPosition);
         }
+        let fillStyle = color;
         if (gradient) {
-            const gradFill = createGradient(ctx, gradient, x, y, x + width, y + height);
-            ctx.fillStyle = gradFill;
+            fillStyle = createGradient(ctx, gradient, x, y, x + width, y + height);
+        }
+        if (filling && filling.percentage <= 100) {
+            ctx.save();
+            const isCustomShape = ["heart", "arrow", "star", "pentagon", "hexagon", "heptagon", "octagon", "diamond", "trapezoid", "kite", "oval", "circle"].includes(shapeName);
+            if (isCustomShape) {
+                ctx.clip();
+            }
+            let fillX = x;
+            let fillY = y;
+            let fillWidth = width;
+            let fillHeight = height;
+            switch (filling.rotation) {
+                case 0:
+                    fillHeight = (filling.percentage / 100) * height;
+                    fillY = y + height - fillHeight;
+                    break;
+                case 180:
+                    fillHeight = (filling.percentage / 100) * height;
+                    break;
+                case 90:
+                    fillWidth = (filling.percentage / 100) * width;
+                    break;
+                case 270:
+                    fillWidth = (filling.percentage / 100) * width;
+                    fillX = x + width - fillWidth;
+                    break;
+                default:
+                    console.warn(`Unsupported filling rotation: ${filling.rotation}, defaulting to 0 (Bottom to Top).`);
+                    fillHeight = (filling.percentage / 100) * height;
+                    fillY = y + height - fillHeight;
+            }
+            ctx.beginPath();
+            ctx.rect(fillX, fillY, fillWidth, fillHeight);
+            ctx.fillStyle = fillStyle;
+            ctx.fill();
+            ctx.restore();
         }
         else {
-            ctx.fillStyle = color;
+            ctx.fillStyle = fillStyle;
+            ctx.fill();
         }
-        ctx.fill();
     }
     if (stroke) {
-        applyStroke(ctx, stroke, x, y, width, height);
+        applyStroke(ctx, stroke, x, y, width, height, shapeName, false);
     }
     ctx.restore();
 }
-/**
- * Helper function to draw a regular polygon.
- * Inscribes a polygon with a given number of sides inside the rectangle defined by (x, y, width, height).
- * @param ctx - The canvas rendering context.
- * @param x - The x-coordinate of the bounding rectangle.
- * @param y - The y-coordinate of the bounding rectangle.
- * @param width - The width of the bounding rectangle.
- * @param height - The height of the bounding rectangle.
- * @param sides - The number of sides (≥ 3).
- */
+function drawHeart(ctx, x, y, width, height) {
+    ctx.beginPath();
+    ctx.moveTo(x + width / 2, y + height * 0.9);
+    ctx.bezierCurveTo(x + (width * 35) / 100, y + (height * 60) / 100, x + (width * 10) / 100, y + (height * 55) / 100, x + (width * 10) / 100, y + (height * 33.33) / 100);
+    ctx.bezierCurveTo(x + (width * 10) / 100, y + (height * 10) / 100, x + (width * 50) / 100, y + (height * 5) / 100, x + (width * 50) / 100, y + (height * 33.33) / 100);
+    ctx.bezierCurveTo(x + (width * 50) / 100, y + (height * 5) / 100, x + (width * 90) / 100, y + (height * 10) / 100, x + (width * 90) / 100, y + (height * 33.33) / 100);
+    ctx.bezierCurveTo(x + (width * 90) / 100, y + (height * 55) / 100, x + (width * 65) / 100, y + (height * 60) / 100, x + width / 2, y + height * 0.9);
+    ctx.closePath();
+}
+/** Draws a polygon with a given number of sides */
 function drawPolygon(ctx, x, y, width, height, sides) {
     const cx = x + width / 2;
     const cy = y + height / 2;
     const radius = Math.min(width, height) / 2;
-    for (let i = 0; i < sides; i++) {
-        const angle = (2 * Math.PI * i) / sides - Math.PI / 2;
-        if (i === 0) {
-            ctx.moveTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
-        }
-        else {
-            ctx.lineTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
-        }
+    ctx.moveTo(cx + radius, cy);
+    for (let i = 1; i <= sides; i++) {
+        const angle = (Math.PI * 2 * i) / sides;
+        ctx.lineTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
+    }
+    ctx.closePath();
+}
+function drawArrow(ctx, x, y, width, height) {
+    const shaftWidth = width * 0.25;
+    const headWidth = width * 0.5;
+    const headHeight = height * 0.6;
+    ctx.beginPath();
+    ctx.moveTo(x, y + height / 2 - shaftWidth / 2);
+    ctx.lineTo(x + width - headWidth, y + height / 2 - shaftWidth / 2);
+    ctx.lineTo(x + width - headWidth, y);
+    ctx.lineTo(x + width, y + height / 2);
+    ctx.lineTo(x + width - headWidth, y + height);
+    ctx.lineTo(x + width - headWidth, y + height / 2 + shaftWidth / 2);
+    ctx.lineTo(x, y + height / 2 + shaftWidth / 2);
+    ctx.closePath();
+}
+function drawStar(ctx, x, y, width, height) {
+    const cx = x + width / 2;
+    const cy = y + height / 2;
+    const size = Math.min(width, height);
+    const outerRadius = size / 2;
+    const innerRadius = outerRadius * 0.5;
+    const rotationOffset = -Math.PI / 2;
+    ctx.beginPath();
+    for (let i = 0; i < 5; i++) {
+        let angle = (i * (Math.PI * 2)) / 5 + rotationOffset;
+        ctx.lineTo(cx + outerRadius * Math.cos(angle), cy + outerRadius * Math.sin(angle));
+        angle += Math.PI / 5;
+        ctx.lineTo(cx + innerRadius * Math.cos(angle), cy + innerRadius * Math.sin(angle));
     }
     ctx.closePath();
 }
@@ -273,9 +328,22 @@ function createGradient(ctx, gradientOptions, startX, startY, endX, endY) {
             typeof endY !== "number") {
             throw new Error("Invalid gradient options for linear gradient. Numeric values are required for startX, startY, endX, and endY.");
         }
+        if (typeof gradientOptions.rotate === "number") {
+            const centerX = (startX + endX) / 2;
+            const centerY = (startY + endY) / 2;
+            const dx = endX - startX;
+            const dy = endY - startY;
+            const length = Math.sqrt(dx * dx + dy * dy);
+            const angleRad = (gradientOptions.rotate * Math.PI) / 180;
+            startX = centerX - (length / 2) * Math.cos(angleRad);
+            startY = centerY - (length / 2) * Math.sin(angleRad);
+            endX = centerX + (length / 2) * Math.cos(angleRad);
+            endY = centerY + (length / 2) * Math.sin(angleRad);
+        }
         const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
         for (const colorStop of gradientOptions.colors) {
-            if (typeof colorStop.stop !== "number" || typeof colorStop.color !== "string") {
+            if (typeof colorStop.stop !== "number" ||
+                typeof colorStop.color !== "string") {
                 throw new Error("Invalid color stop. Each color stop should have a numeric stop value and a color string.");
             }
             gradient.addColorStop(colorStop.stop, colorStop.color);
@@ -293,7 +361,8 @@ function createGradient(ctx, gradientOptions, startX, startY, endX, endY) {
         }
         const gradient = ctx.createRadialGradient(gradientOptions.startX, gradientOptions.startY, gradientOptions.startRadius, gradientOptions.endX, gradientOptions.endY, gradientOptions.endRadius);
         for (const colorStop of gradientOptions.colors) {
-            if (typeof colorStop.stop !== "number" || typeof colorStop.color !== "string") {
+            if (typeof colorStop.stop !== "number" ||
+                typeof colorStop.color !== "string") {
                 throw new Error("Invalid color stop. Each color stop should have a numeric stop value and a color string.");
             }
             gradient.addColorStop(colorStop.stop, colorStop.color);
@@ -343,49 +412,39 @@ function imageRadius(ctx, image, x, y, width, height, borderRadius, borderPositi
     if (borderRadius === "circular") {
         const circleRadius = Math.min(width, height) / 2;
         ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
-        ctx.closePath();
+        ctx.clip();
     }
-    else {
-        const br = typeof borderRadius === "number" ? borderRadius : 0;
-        const bp = borderPosition.trim().toLowerCase();
-        const selectedCorners = new Set(bp.split(",").map((s) => s.trim()));
-        const roundTopLeft = selectedCorners.has("all") || selectedCorners.has("top-left") || (selectedCorners.has("top") && selectedCorners.has("left"));
-        const roundTopRight = selectedCorners.has("all") || selectedCorners.has("top-right") || (selectedCorners.has("top") && selectedCorners.has("right"));
-        const roundBottomRight = selectedCorners.has("all") || selectedCorners.has("bottom-right") || (selectedCorners.has("bottom") && selectedCorners.has("right"));
-        const roundBottomLeft = selectedCorners.has("all") || selectedCorners.has("bottom-left") || (selectedCorners.has("bottom") && selectedCorners.has("left"));
+    else if (typeof borderRadius === "number" && borderRadius > 0) {
+        const br = Math.min(borderRadius, width / 2, height / 2);
+        const selectedPositions = new Set(borderPosition.toLowerCase().split(",").map((s) => s.trim()));
+        const roundTopLeft = selectedPositions.has("all") || selectedPositions.has("top-left") || (selectedPositions.has("top") && selectedPositions.has("left"));
+        const roundTopRight = selectedPositions.has("all") || selectedPositions.has("top-right") || (selectedPositions.has("top") && selectedPositions.has("right"));
+        const roundBottomRight = selectedPositions.has("all") || selectedPositions.has("bottom-right") || (selectedPositions.has("bottom") && selectedPositions.has("right"));
+        const roundBottomLeft = selectedPositions.has("all") || selectedPositions.has("bottom-left") || (selectedPositions.has("bottom") && selectedPositions.has("left"));
         const tl = roundTopLeft ? br : 0;
         const tr = roundTopRight ? br : 0;
         const brR = roundBottomRight ? br : 0;
         const bl = roundBottomLeft ? br : 0;
         ctx.moveTo(x + tl, y);
-        if (roundTopLeft && roundTopRight) {
-            ctx.arcTo(x, y, x + width, y, tl);
-        }
-        else if (roundTopLeft) {
-            ctx.arcTo(x, y, x + width, y, tl);
-        }
-        else {
-            ctx.lineTo(x, y);
-            ctx.lineTo(x + width, y);
-        }
-        if (tr > 0) {
-            ctx.arcTo(x + width, y, x + width, y + height, tr);
-        }
+        ctx.lineTo(x + width - tr, y);
+        if (tr > 0)
+            ctx.arc(x + width - tr, y + tr, tr, -Math.PI / 2, 0, false);
         ctx.lineTo(x + width, y + height - brR);
-        if (brR > 0) {
-            ctx.arcTo(x + width, y + height, x, y + height, brR);
-        }
+        if (brR > 0)
+            ctx.arc(x + width - brR, y + height - brR, brR, 0, Math.PI / 2, false);
         ctx.lineTo(x + bl, y + height);
-        if (bl > 0) {
-            ctx.arcTo(x, y + height, x, y, bl);
-        }
+        if (bl > 0)
+            ctx.arc(x + bl, y + height - bl, bl, Math.PI / 2, Math.PI, false);
         ctx.lineTo(x, y + tl);
-        if (tl > 0) {
-            ctx.arcTo(x, y, x + tl, y, tl);
-        }
+        if (tl > 0)
+            ctx.arc(x + tl, y + tl, tl, Math.PI, -Math.PI / 2, false);
         ctx.closePath();
+        ctx.clip();
+    }
+    else {
+        ctx.rect(x, y, width, height);
+        ctx.clip();
     }
-    ctx.clip();
     ctx.drawImage(image, x, y, width, height);
     ctx.restore();
 }
@@ -404,94 +463,41 @@ function imageRadius(ctx, image, x, y, width, height, borderRadius, borderPositi
  *   - "top-left", "top-right", "bottom-left", "bottom-right"
  *   - Or a comma-separated list, e.g. "top-left, bottom-right" or "top, left, bottom"
  */
-function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPosition = 'all') {
+function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPosition = "all") {
+    ctx.beginPath();
     if (borderRadius === "circular") {
         const circleRadius = Math.min(width, height) / 2;
-        ctx.beginPath();
         ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
-        ctx.closePath();
     }
-    else if (borderRadius) {
-        let roundTopLeft = false;
-        let roundTopRight = false;
-        let roundBottomRight = false;
-        let roundBottomLeft = false;
-        const bp = borderPosition.trim().toLowerCase();
-        if (bp === 'all') {
-            roundTopLeft = roundTopRight = roundBottomRight = roundBottomLeft = true;
-        }
-        else if (bp === 'top') {
-            roundTopLeft = roundTopRight = true;
-        }
-        else if (bp === 'bottom') {
-            roundBottomLeft = roundBottomRight = true;
-        }
-        else if (bp === 'left') {
-            roundTopLeft = roundBottomLeft = true;
-        }
-        else if (bp === 'right') {
-            roundTopRight = roundBottomRight = true;
-        }
-        else if (bp === 'top-left') {
-            roundTopLeft = true;
-        }
-        else if (bp === 'top-right') {
-            roundTopRight = true;
-        }
-        else if (bp === 'bottom-left') {
-            roundBottomLeft = true;
-        }
-        else if (bp === 'bottom-right') {
-            roundBottomRight = true;
-        }
-        else {
-            const positions = bp.split(',').map(s => s.trim());
-            roundTopLeft = positions.includes('top-left') || (positions.includes('top') && positions.includes('left'));
-            roundTopRight = positions.includes('top-right') || (positions.includes('top') && positions.includes('right'));
-            roundBottomRight = positions.includes('bottom-right') || (positions.includes('bottom') && positions.includes('right'));
-            roundBottomLeft = positions.includes('bottom-left') || (positions.includes('bottom') && positions.includes('left'));
-        }
-        const tl = roundTopLeft ? +borderRadius : 0;
-        const tr = roundTopRight ? +borderRadius : 0;
-        const br = roundBottomRight ? +borderRadius : 0;
-        const bl = roundBottomLeft ? +borderRadius : 0;
-        ctx.beginPath();
+    else if (borderRadius > 0) {
+        const br = Math.min(borderRadius, width / 2, height / 2);
+        const selectedPositions = new Set(borderPosition.toLowerCase().split(",").map((s) => s.trim()));
+        const roundTopLeft = selectedPositions.has("all") || selectedPositions.has("top-left") || (selectedPositions.has("top") && selectedPositions.has("left"));
+        const roundTopRight = selectedPositions.has("all") || selectedPositions.has("top-right") || (selectedPositions.has("top") && selectedPositions.has("right"));
+        const roundBottomRight = selectedPositions.has("all") || selectedPositions.has("bottom-right") || (selectedPositions.has("bottom") && selectedPositions.has("right"));
+        const roundBottomLeft = selectedPositions.has("all") || selectedPositions.has("bottom-left") || (selectedPositions.has("bottom") && selectedPositions.has("left"));
+        const tl = roundTopLeft ? br : 0;
+        const tr = roundTopRight ? br : 0;
+        const brR = roundBottomRight ? br : 0;
+        const bl = roundBottomLeft ? br : 0;
         ctx.moveTo(x + tl, y);
         ctx.lineTo(x + width - tr, y);
-        if (tr > 0) {
-            ctx.quadraticCurveTo(x + width, y, x + width, y + tr);
-        }
-        else {
-            ctx.lineTo(x + width, y);
-        }
-        ctx.lineTo(x + width, y + height - br);
-        if (br > 0) {
-            ctx.quadraticCurveTo(x + width, y + height, x + width - br, y + height);
-        }
-        else {
-            ctx.lineTo(x + width, y + height);
-        }
+        if (tr > 0)
+            ctx.arc(x + width - tr, y + tr, tr, -Math.PI / 2, 0, false);
+        ctx.lineTo(x + width, y + height - brR);
+        if (brR > 0)
+            ctx.arc(x + width - brR, y + height - brR, brR, 0, Math.PI / 2, false);
         ctx.lineTo(x + bl, y + height);
-        if (bl > 0) {
-            ctx.quadraticCurveTo(x, y + height, x, y + height - bl);
-        }
-        else {
-            ctx.lineTo(x, y + height);
-        }
+        if (bl > 0)
+            ctx.arc(x + bl, y + height - bl, bl, Math.PI / 2, Math.PI, false);
         ctx.lineTo(x, y + tl);
-        if (tl > 0) {
-            ctx.quadraticCurveTo(x, y, x + tl, y);
-        }
-        else {
-            ctx.lineTo(x, y);
-        }
-        ctx.closePath();
+        if (tl > 0)
+            ctx.arc(x + tl, y + tl, tl, Math.PI, -Math.PI / 2, false);
     }
     else {
-        ctx.beginPath();
         ctx.rect(x, y, width, height);
-        ctx.closePath();
     }
+    ctx.closePath();
 }
 /**
 * Performs bilinear interpolation on four corners.