apexify.js 4.6.2 → 4.7.0

package/lib/canvas/utils/Image/imageProperties.ts

@@ -34,13 +34,15 @@ export function applyShadow(
         width,
         height,
         shadow.borderRadius ?? 2,
-        shadow.borderPosition
       );
   
       ctx.fillStyle = shadow.gradient
-      ? createGradient(ctx, shadow.gradient, x, y, x + width, y + height)
-      : shadow.color || "transparent";
-      
+          ? createGradient(
+              ctx, shadow.gradient, 
+              shadowX, shadowY,
+              shadowX + width, shadowY + height 
+          )
+          : shadow.color || "transparent";
       ctx.fill();
     }
   
@@ -68,62 +70,101 @@ export function applyZoom(
   ctx.translate(-zoomX, -zoomY);
 }
 
-  /**
-   * 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.
-   *
-   * @param ctx The canvas rendering context.
-   * @param stroke The stroke properties.
-   * @param x The x-coordinate of the shape.
-   * @param y The y-coordinate of the shape.
-   * @param width The width of the shape.
-   * @param height The height of the shape.
-   */
-  export function applyStroke(
-    ctx: SKRSContext2D,
-    stroke: ImageProperties['stroke'],
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ): void {
-    if (!stroke) return;
-  
-    ctx.save();
-    ctx.beginPath();
-  
-    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.stroke();
-    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.
+ * Applies stroke to the canvas context with support for selective side strokes.
+ * Supports optional blur effect on the stroke.
+ *
+ * @param ctx The canvas rendering context.
+ * @param stroke The stroke properties.
+ * @param x The x-coordinate of the shape.
+ * @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 function applyStroke(
+  ctx: SKRSContext2D,
+  stroke: ImageProperties["stroke"],
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  shapeName?: string,
+  isImage?: boolean
+): void {
+  if (!stroke) return;
+
+  ctx.save();
+
+  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;
+
+  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 as string)) {
+    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();
+}
+
+
+
 export function drawShape(ctx: SKRSContext2D, shapeSettings: any): void {
   const {
     source,
@@ -139,10 +180,10 @@ export function drawShape(ctx: SKRSContext2D, shapeSettings: any): void {
     isFilled = false,
     color = "transparent",
     gradient,
+    filling,
   } = shapeSettings;
 
   const shapeName = source.toLowerCase();
-
   ctx.save();
 
   applyRotation(ctx, rotation, x, y, width, height);
@@ -166,40 +207,13 @@ export function drawShape(ctx: SKRSContext2D, shapeSettings: any): void {
       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 'octagon': {
-      drawPolygon(ctx, x, y, width, height, 8);
+    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 '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': {
@@ -214,31 +228,12 @@ export function drawShape(ctx: SKRSContext2D, shapeSettings: any): void {
       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': {
@@ -259,17 +254,6 @@ export function drawShape(ctx: SKRSContext2D, shapeSettings: any): void {
       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}`);
@@ -280,108 +264,262 @@ export function drawShape(ctx: SKRSContext2D, shapeSettings: any): void {
     if (borderRadius && shapeName !== 'circle' && shapeName !== 'oval') {
       objectRadius(ctx, x, y, width, height, borderRadius, borderPosition);
     }
+  
+    let fillStyle: string | CanvasGradient = 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: SKRSContext2D, x: number, y: number, width: number, height: number): void {
+  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: SKRSContext2D, x: number, y: number, width: number, height: number, sides: number): void {
   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: SKRSContext2D, x: number, y: number, width: number, height: number) {
+  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: SKRSContext2D, x: number, y: number, width: number, height: number): void {
+  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();
 }
 
-export function createGradient(ctx: any, gradientOptions: any, startX: number, startY: number, endX: number, endY: number) {
-    if (!gradientOptions || !gradientOptions.type || !gradientOptions.colors) {
-        throw new Error("Invalid gradient options. Provide a valid object with type and colors properties.");
+export function createGradient(
+  ctx: any,
+  gradientOptions: any,
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number
+) {
+  if (!gradientOptions || !gradientOptions.type || !gradientOptions.colors) {
+    throw new Error(
+      "Invalid gradient options. Provide a valid object with type and colors properties."
+    );
+  }
+
+  if (!Array.isArray(gradientOptions.colors)) {
+    throw new Error(
+      "Invalid gradient options. The colors property should be an array of color stops."
+    );
+  }
+
+  if (gradientOptions.type === "linear") {
+    if (
+      typeof startX !== "number" ||
+      typeof startY !== "number" ||
+      typeof endX !== "number" ||
+      typeof endY !== "number"
+    ) {
+      throw new Error(
+        "Invalid gradient options for linear gradient. Numeric values are required for startX, startY, endX, and endY."
+      );
     }
 
-    if (!Array.isArray(gradientOptions.colors)) {
-        throw new Error("Invalid gradient options. The colors property should be an array of color stops.");
+    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);
     }
 
-    if (gradientOptions.type === "linear") {
-        if (
-            typeof startX !== "number" ||
-            typeof startY !== "number" ||
-            typeof endX !== "number" ||
-            typeof endY !== "number"
-        ) {
-            throw new Error("Invalid gradient options for linear gradient. Numeric values are required for startX, startY, endX, and endY.");
-        }
-        const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
-
-        for (const colorStop of gradientOptions.colors) {
-            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);
-        }
-
-        return gradient;
-
-    } else if (gradientOptions.type === "radial") {
-        if (
-            typeof gradientOptions.startX !== "number" ||
-            typeof gradientOptions.startY !== "number" ||
-            typeof gradientOptions.startRadius !== "number" ||
-            typeof gradientOptions.endX !== "number" ||
-            typeof gradientOptions.endY !== "number" ||
-            typeof gradientOptions.endRadius !== "number"
-        ) {
-            throw new Error("Invalid gradient options for radial gradient. Numeric values are required for startX, startY, startRadius, endX, endY, and endRadius.");
-        }
-        const gradient = ctx.createRadialGradient(
-            gradientOptions.startX,
-            gradientOptions.startY,
-            gradientOptions.startRadius,
-            gradientOptions.endX,
-            gradientOptions.endY,
-            gradientOptions.endRadius
+    const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+
+    for (const colorStop of gradientOptions.colors) {
+      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);
+    }
 
-        for (const colorStop of gradientOptions.colors) {
-            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);
-        }
+    return gradient;
+  } else if (gradientOptions.type === "radial") {
+    if (
+      typeof gradientOptions.startX !== "number" ||
+      typeof gradientOptions.startY !== "number" ||
+      typeof gradientOptions.startRadius !== "number" ||
+      typeof gradientOptions.endX !== "number" ||
+      typeof gradientOptions.endY !== "number" ||
+      typeof gradientOptions.endRadius !== "number"
+    ) {
+      throw new Error(
+        "Invalid gradient options for radial gradient. Numeric values are required for startX, startY, startRadius, endX, endY, and endRadius."
+      );
+    }
 
-        return gradient;
+    const gradient = ctx.createRadialGradient(
+      gradientOptions.startX,
+      gradientOptions.startY,
+      gradientOptions.startRadius,
+      gradientOptions.endX,
+      gradientOptions.endY,
+      gradientOptions.endRadius
+    );
 
-    } else {
-        throw new Error('Unsupported gradient type. Use "linear" or "radial".');
+    for (const colorStop of gradientOptions.colors) {
+      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);
     }
+
+    return gradient;
+  } else {
+    throw new Error('Unsupported gradient type. Use "linear" or "radial".');
+  }
 }
 
 
@@ -442,17 +580,15 @@ export function applyRotation(
     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();
-    } else {
-      const br: number = typeof borderRadius === "number" ? borderRadius : 0;
-      const bp = borderPosition.trim().toLowerCase();
-  
-      const selectedCorners = new Set(bp.split(",").map((s) => s.trim()));
+      ctx.clip();
+    } else if (typeof borderRadius === "number" && borderRadius > 0) {
+      const br: number = Math.min(borderRadius, width / 2, height / 2);
+      const selectedPositions = new Set(borderPosition.toLowerCase().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"));
+      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;
@@ -460,43 +596,28 @@ export function applyRotation(
       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();
   }
   
+    
   
 /**
  * Creates a rounded rectangle (or circular) path on the canvas context.
@@ -514,91 +635,51 @@ export function applyRotation(
  *   - Or a comma-separated list, e.g. "top-left, bottom-right" or "top, left, bottom"
  */
 export function objectRadius(
-    ctx: SKRSContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    borderRadius: number | "circular" = 0.1,
-    borderPosition: string = 'all'
-  ): void {
-    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();
-      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);
-      }
-      ctx.lineTo(x + bl, y + height);
-      if (bl > 0) {
-        ctx.quadraticCurveTo(x, y + height, x, y + height - bl);
-      } else {
-        ctx.lineTo(x, y + height);
-      }
-      ctx.lineTo(x, y + tl);
-      if (tl > 0) {
-        ctx.quadraticCurveTo(x, y, x + tl, y);
-      } else {
-        ctx.lineTo(x, y);
-      }
-      ctx.closePath();
-    } else {
-      ctx.beginPath();
-      ctx.rect(x, y, width, height);
-      ctx.closePath();
-    }
+  ctx: SKRSContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  borderRadius: number | "circular" = 0.1,
+  borderPosition: string = "all"
+): void {
+  ctx.beginPath();
+
+  if (borderRadius === "circular") {
+    const circleRadius = Math.min(width, height) / 2;
+    ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
+  } else if (borderRadius > 0) {
+    const br: number = 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.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.arc(x + bl, y + height - bl, bl, Math.PI / 2, Math.PI, false);
+    ctx.lineTo(x, y + tl);
+    if (tl > 0) ctx.arc(x + tl, y + tl, tl, Math.PI, -Math.PI / 2, false);
+  } else {
+    ctx.rect(x, y, width, height);
   }
+
+  ctx.closePath();
+}
+
   
 
   /**