apexify.js 4.5.56 → 4.5.57

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

@@ -1,4 +1,4 @@
-import { SKRSContext2D } from "@napi-rs/canvas";
+import { Image, SKRSContext2D } from "@napi-rs/canvas";
 import { ImageProperties } from "../utils";
 
 /**
@@ -37,7 +37,10 @@ export function applyShadow(
         shadow.borderPosition
       );
   
-      ctx.fillStyle = shadow.color || "transparent";
+      ctx.fillStyle = shadow.gradient
+      ? createGradient(ctx, shadow.gradient, x, y, x + width, y + height)
+      : shadow.color || "transparent";
+      
       ctx.fill();
     }
   
@@ -60,7 +63,6 @@ export function applyZoom(
   const zoomX = zoom.x ?? 0;
   const zoomY = zoom.y ?? 0;
   
-  // Translate to the zoom origin, apply the scaling, then translate back.
   ctx.translate(zoomX, zoomY);
   ctx.scale(scale, scale);
   ctx.translate(-zoomX, -zoomY);
@@ -90,26 +92,21 @@ export function applyZoom(
     
     ctx.save();
     
-    // Set stroke style: use gradient if provided, otherwise solid color.
     ctx.strokeStyle = stroke.gradient
       ? createGradient(ctx, stroke.gradient, x, y, x + width, y + height)
       : stroke.color || "transparent";
     
-    // Set the stroke width.
     ctx.lineWidth = stroke.width ?? 0;
     
-    // Calculate offset: stroke.position plus half the stroke width ensures the stroke is drawn outside.
     const positionOffset = stroke.position ?? 0;
     const halfStroke = ctx.lineWidth / 2;
     const totalOffset = positionOffset + halfStroke;
     
-    // Adjust the drawing rectangle to accommodate the stroke.
     const adjustedX = x - totalOffset;
     const adjustedY = y - totalOffset;
     const adjustedWidth = width + totalOffset * 2;
     const adjustedHeight = height + totalOffset * 2;
     
-    // If the border position is "all" (or not provided), draw a complete rounded rectangle.
     if (!stroke.borderPosition || stroke.borderPosition.trim().toLowerCase() === "all") {
       objectRadius(
         ctx,
@@ -125,21 +122,16 @@ export function applyZoom(
       return;
     }
     
-    // Otherwise, draw only the segments corresponding to the specified sides/corners.
     const bp = stroke.borderPosition.toLowerCase();
     const positions = bp.split(',').map(s => s.trim());
-    // For convenience, if a simple keyword (like "top") is used, it indicates the entire edge.
-    // We'll allow individual corners as well.
     
     ctx.beginPath();
     
-    // --- Top Edge ---
     if (
       positions.includes("top") ||
       positions.includes("top-left") ||
       positions.includes("top-right")
     ) {
-      // Determine rounding for the top-left and top-right corners.
       const tl = positions.includes("top-left") || positions.includes("top")
         ? (stroke.borderRadius ? +stroke.borderRadius : 0)
         : 0;
@@ -153,7 +145,6 @@ export function applyZoom(
       }
     }
     
-    // --- Right Edge ---
     if (
       positions.includes("right") ||
       positions.includes("top-right") ||
@@ -172,7 +163,6 @@ export function applyZoom(
       }
     }
     
-    // --- Bottom Edge ---
     if (
       positions.includes("bottom") ||
       positions.includes("bottom-left") ||
@@ -191,7 +181,6 @@ export function applyZoom(
       }
     }
     
-    // --- Left Edge ---
     if (
       positions.includes("left") ||
       positions.includes("top-left") ||
@@ -215,172 +204,206 @@ export function applyZoom(
   }
   
 /**
- * Draws a shape on the canvas context.
- * @param ctx The canvas rendering context.
- * @param shapeSettings The settings for the shape.
+ * 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 function drawShape(ctx: any, shapeSettings: any) {
-  const { source, x, y, width, height, rotation, borderRadius, borderPosition, stroke, shadow, isFilled, color, gradient } = shapeSettings;
+export function drawShape(ctx: SKRSContext2D, shapeSettings: any): void {
+  const {
+    source,
+    x,
+    y,
+    width,
+    height,
+    rotation = 0,
+    borderRadius = 0,
+    borderPosition = 'all',
+    stroke,
+    shadow,
+    isFilled = false,
+    color = "transparent",
+    gradient,
+  } = shapeSettings;
 
   const shapeName = source.toLowerCase();
 
+  ctx.save();
+
+  applyRotation(ctx, rotation, x, y, width, height);
+  applyShadow(ctx, shadow, x, y, width, height);
+
+  ctx.beginPath();
+
   switch (shapeName) {
-      case 'circle':
-          ctx.save();
-          applyShadow(ctx, shadow, x, y, width, height);
-          applyRotation(ctx, rotation, x, y, width, height);
-          ctx.beginPath();
-          ctx.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
-          break;
-      case 'square':
-          ctx.save();
-          applyRotation(ctx, rotation, x, y, width, height);
-          applyShadow(ctx, shadow, x, y, width, height);
-          break;
-      case 'triangle':
-          ctx.save();
-          applyRotation(ctx, rotation, x, y, width, height);
-          applyShadow(ctx, shadow, x, y, width, height);
-          ctx.beginPath();
-          ctx.moveTo(x, y + height);
-          ctx.lineTo(x + width / 2, y);
-          ctx.lineTo(x + width, y + height);
-          ctx.closePath();
-          break;
-      case 'pentagon':
-          ctx.save();
-          applyRotation(ctx, rotation, x, y, width, height);
-          applyShadow(ctx, shadow, x, y, width, height);
-          ctx.beginPath();
-          for (let i = 0; i < 5; i++) {
-              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 5),
-                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 5));
-          }
-          ctx.closePath();
-          break;
-      case 'hexagon':
-          ctx.save();
-          applyRotation(ctx, rotation, x, y, width, height);
-          applyShadow(ctx, shadow, x, y, width, height);
-          ctx.beginPath();
-          for (let i = 0; i < 6; i++) {
-              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 6),
-                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 6));
-          }
-          ctx.closePath();
-          break;
-      case 'heptagon':
-          ctx.save();
-          applyRotation(ctx, rotation, x, y, width, height);
-          applyShadow(ctx, shadow, x, y, width, height);
-          ctx.beginPath();
-          for (let i = 0; i < 7; i++) {
-              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 7),
-                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 7));
-          }
-          ctx.closePath();
-          break;
-      case 'octagon':
-          ctx.save();
-          applyRotation(ctx, rotation, x, y, width, height);
-          applyShadow(ctx, shadow, x, y, width, height);
-          ctx.beginPath();
-          for (let i = 0; i < 8; i++) {
-              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 8),
-                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 8));
-          }
-          ctx.closePath();
-      case 'star':
-          ctx.save();
-          applyRotation(ctx, rotation, x, y, width, height);
-          applyShadow(ctx, shadow, x, y, width, height);
-          ctx.beginPath();
-          const numPoints = 5;
-          const outerRadius = Math.min(width, height) / 2;
-          const innerRadius = outerRadius / 2;
-          for (let i = 0; i < numPoints * 2; i++) {
-              const radius = i % 2 === 0 ? outerRadius : innerRadius;
-              const angle = Math.PI / numPoints * i;
-              ctx.lineTo(x + width / 2 + radius * Math.sin(angle),
-                         y + height / 2 - radius * Math.cos(angle));
+    case 'circle': {
+      ctx.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
+      break;
+    }
+    case 'square': {
+      ctx.rect(x, y, width, height);
+      break;
+    }
+    case 'triangle': {
+      ctx.moveTo(x + width / 2, y);
+      ctx.lineTo(x, y + height);
+      ctx.lineTo(x + width, y + height);
+      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);
+      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();
-          break;
-        case 'oval':
-            ctx.save();
-            applyRotation(ctx, rotation, x, y, width, height);
-            applyShadow(ctx, shadow, x, y, width, height);
-        
-            ctx.beginPath();
-            ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
-            ctx.closePath();
-            if (isFilled) {
-                ctx.fillStyle = color;
-                ctx.fill();
-            } else {
-                applyStroke(ctx, stroke, x, y, width, height);
-            }
-            ctx.restore();
-            break;
-          default:
-          throw new Error(`Unsupported shape: ${shapeName}`);
-  }
-  if (isFilled) {
-    if (borderRadius) {
-        objectRadius(ctx, x, y, width, height, borderRadius, borderPosition);
-        if (gradient) {
-            const gradientFill = createGradient(
-                ctx,
-                gradient,
-                x,
-                y, 
-                x + width, 
-                y + height,
-            );
-            ctx.fillStyle = gradientFill;
-        } else {
-            ctx.fillStyle = color || "transparent";
         }
-        ctx.fill();
-    } else {
-      if (gradient) {
-        const gradientFill = createGradient(
-            ctx,
-            gradient,
-            x,
-            y,
-            x + width,
-            y + height,
-        );
-        ctx.fillStyle = gradientFill;
-    } else {
-        ctx.fillStyle = color || "transparent";
+        ctx.closePath();
+      }
+      break;
     }
-            if (shapeName === 'square') {
-            ctx.fillRect(x, y, width, height);
-        } else if (shapeName === 'circle') {
-            ctx.fill();
-        } else {
-            ctx.fill()
-        }
+    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;
+    }
+    case 'oval': {
+      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();
+      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();
+      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 '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}`);
+    }
+  }
+
+  if (isFilled) {
+    if (borderRadius && shapeName !== 'circle' && shapeName !== 'oval') {
+      objectRadius(ctx, x, y, width, height, borderRadius, borderPosition);
     }
-    applyStroke(ctx, stroke, x, y, width, height);
-} else {
     if (gradient) {
-        const gradientFill = createGradient(
-            ctx,
-            gradient,
-            x, 
-            y,
-            x + width, 
-            y + height,
-        );
-        ctx.fillStyle = gradientFill;
+      const gradFill = createGradient(ctx, gradient, x, y, x + width, y + height);
+      ctx.fillStyle = gradFill;
+    } else {
+      ctx.fillStyle = color;
     }
+    ctx.fill();
+  }
+
+  if (stroke) {
     applyStroke(ctx, stroke, x, y, width, height);
+  }
+
+  ctx.restore();
 }
 
-    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 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.closePath();
 }
 
 export function createGradient(ctx: any, gradientOptions: any, startX: number, startY: number, endX: number, endY: number) {
@@ -464,7 +487,6 @@ export function applyRotation(
     width: number,
     height: number
   ): void {
-    // Check is not really necessary since 0 is valid.
     const rotationX = x + width / 2;
     const rotationY = y + height / 2;
     ctx.translate(rotationX, rotationY);
@@ -472,49 +494,95 @@ export function applyRotation(
     ctx.translate(-rotationX, -rotationY);
   }
   
-
-/**
- * Applies border radius to the canvas context.
- * @param ctx The canvas rendering context.
- * @param image The image properties containing the border radius.
- * @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 borderRadius The border radius value.
-* @param borderPosition The border radius position to be applied on.
- */
-export function imageRadius(ctx: any, image: any, x: number, y: number, width: number, height: number, borderRadius: any, borderPosition: string = 'all'): void {
+  /**
+   * Applies border radius to the canvas context with selective corner support.
+   *
+   * @param ctx The canvas rendering context.
+   * @param image The image to be drawn (will be drawn after clipping).
+   * @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 borderRadius The border radius value (number or "circular").
+   * @param borderPosition The sides or corners to round.
+   *   Valid values include:
+   *     - "all"
+   *     - "top", "bottom", "left", "right"
+   *     - "top-left", "top-right", "bottom-left", "bottom-right"
+   *     - Or a comma‑separated list (e.g., "top, left, bottom")
+   */
+  export function imageRadius(
+    ctx: SKRSContext2D,
+    image: any,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    borderRadius: number | "circular",
+    borderPosition: string = "all"
+  ): void {
     ctx.save();
     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);
+      ctx.closePath();
     } else {
-      ctx.moveTo(x + borderRadius, y);
-      ctx.lineTo(x + width - borderRadius, y);
-      ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
-      ctx.lineTo(x + width, y + height - borderRadius);
-      ctx.quadraticCurveTo(
-        x + width,
-        y + height,
-        x + width - borderRadius,
-        y + height,
-      );
-      ctx.lineTo(x + borderRadius, y + height);
-      ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
-      ctx.lineTo(x, y + borderRadius);
-      ctx.quadraticCurveTo(x, y, x + borderRadius, y);
+      const br: number = 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"));
+  
+      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, y + height - brR);
+      if (brR > 0) {
+        ctx.arcTo(x + width, y + height, x, y + height, brR);
+      }
+  
+      ctx.lineTo(x + bl, y + height);
+      if (bl > 0) {
+        ctx.arcTo(x, y + height, x, y, bl);
+      }
+  
+      ctx.lineTo(x, y + tl);
+      if (tl > 0) {
+        ctx.arcTo(x, y, x + tl, y, tl);
+      }
+  
+      ctx.closePath();
     }
-
-    ctx.closePath();
+  
     ctx.clip();
     ctx.drawImage(image, x, y, width, height);
     ctx.restore();
-}
-
-
+  }
+  
+  
 /**
  * Creates a rounded rectangle (or circular) path on the canvas context.
  * 
@@ -540,13 +608,11 @@ export function objectRadius(
     borderPosition: string = 'all'
   ): void {
     if (borderRadius === "circular") {
-      // Draw a circular path based on the smallest dimension.
       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) {
-      // Determine which corners to round.
       let roundTopLeft = false;
       let roundTopRight = false;
       let roundBottomRight = false;
@@ -554,7 +620,6 @@ export function objectRadius(
       
       const bp = borderPosition.trim().toLowerCase();
   
-      // If a simple keyword is provided, handle those cases:
       if (bp === 'all') {
         roundTopLeft = roundTopRight = roundBottomRight = roundBottomLeft = true;
       } else if (bp === 'top') {
@@ -574,7 +639,6 @@ export function objectRadius(
       } else if (bp === 'bottom-right') {
         roundBottomRight = true;
       } else {
-        // For a comma-separated list of values.
         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'));
@@ -582,38 +646,31 @@ export function objectRadius(
         roundBottomLeft = positions.includes('bottom-left') || (positions.includes('bottom') && positions.includes('left'));
       }
   
-      // Determine the radius for each corner.
       const tl = roundTopLeft ? +borderRadius : 0;
       const tr = roundTopRight ? +borderRadius : 0;
       const br = roundBottomRight ? +borderRadius : 0;
       const bl = roundBottomLeft ? +borderRadius : 0;
   
-      // Construct the path.
       ctx.beginPath();
-      // Start at top-left (with offset for rounding)
       ctx.moveTo(x + tl, y);
-      // Top edge to top-right corner.
       ctx.lineTo(x + width - tr, y);
       if (tr > 0) {
         ctx.quadraticCurveTo(x + width, y, x + width, y + tr);
       } else {
         ctx.lineTo(x + width, y);
       }
-      // Right edge to bottom-right corner.
       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);
       }
-      // Bottom edge to bottom-left corner.
       ctx.lineTo(x + bl, y + height);
       if (bl > 0) {
         ctx.quadraticCurveTo(x, y + height, x, y + height - bl);
       } else {
         ctx.lineTo(x, y + height);
       }
-      // Left edge back to top-left.
       ctx.lineTo(x, y + tl);
       if (tl > 0) {
         ctx.quadraticCurveTo(x, y, x + tl, y);
@@ -622,10 +679,101 @@ export function objectRadius(
       }
       ctx.closePath();
     } else {
-      // If no borderRadius is provided, simply use a rectangle.
       ctx.beginPath();
       ctx.rect(x, y, width, height);
       ctx.closePath();
     }
   }
-  
+  
+
+  /**
+ * Performs bilinear interpolation on four corners.
+ * @param corners The four corners (topLeft, topRight, bottomRight, bottomLeft).
+ * @param t Horizontal interpolation factor (0 to 1).
+ * @param u Vertical interpolation factor (0 to 1).
+ * @returns The interpolated point.
+ */
+function bilinearInterpolate(corners: [{ x: number, y: number }, { x: number, y: number }, { x: number, y: number }, { x: number, y: number }], t: number, u: number): { x: number, y: number } {
+  const top: { x: number, y: number } = {
+    x: corners[0].x * (1 - t) + corners[1].x * t,
+    y: corners[0].y * (1 - t) + corners[1].y * t,
+  };
+  const bottom: { x: number, y: number } = {
+    x: corners[3].x * (1 - t) + corners[2].x * t,
+    y: corners[3].y * (1 - t) + corners[2].y * t,
+  };
+  return {
+    x: top.x * (1 - u) + bottom.x * u,
+    y: top.y * (1 - u) + bottom.y * u,
+  };
+}
+
+/**
+ * Applies a perspective warp to the given image by subdividing the source rectangle 
+ * and drawing each cell with an affine transform approximating the local perspective.
+ *
+ * @param ctx The canvas rendering context.
+ * @param image The source image.
+ * @param x The x-coordinate where the image is drawn.
+ * @param y The y-coordinate where the image is drawn.
+ * @param width The width of the region to draw.
+ * @param height The height of the region to draw.
+ * @param perspective An object containing four destination corners:
+ *                    { topLeft, topRight, bottomRight, bottomLeft }.
+ * @param gridCols Number of columns to subdivide (default: 10).
+ * @param gridRows Number of rows to subdivide (default: 10).
+ */
+export async function applyPerspective(
+  ctx: SKRSContext2D,
+  image: Image,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  perspective: { topLeft: { x: number, y: number }; topRight: { x: number, y: number }; bottomRight: { x: number, y: number }; bottomLeft: { x: number, y: number }; },
+  gridCols: number = 10,
+  gridRows: number = 10
+): Promise<void> {
+  const cellWidth = width / gridCols;
+  const cellHeight = height / gridRows;
+
+  for (let row = 0; row < gridRows; row++) {
+    for (let col = 0; col < gridCols; col++) {
+      const sx = x + col * cellWidth;
+      const sy = y + row * cellHeight;
+
+      const t0 = col / gridCols;
+      const t1 = (col + 1) / gridCols;
+      const u0 = row / gridRows;
+      const u1 = (row + 1) / gridRows;
+
+      const destTL = bilinearInterpolate(
+        [perspective.topLeft, perspective.topRight, perspective.bottomRight, perspective.bottomLeft],
+        t0,
+        u0
+      );
+      const destTR = bilinearInterpolate(
+        [perspective.topLeft, perspective.topRight, perspective.bottomRight, perspective.bottomLeft],
+        t1,
+        u0
+      );
+      const destBL = bilinearInterpolate(
+        [perspective.topLeft, perspective.topRight, perspective.bottomRight, perspective.bottomLeft],
+        t0,
+        u1
+      );
+
+      const a = (destTR.x - destTL.x) / cellWidth;
+      const b = (destTR.y - destTL.y) / cellWidth;
+      const c = (destBL.x - destTL.x) / cellHeight;
+      const d = (destBL.y - destTL.y) / cellHeight;
+      const e = destTL.x;
+      const f = destTL.y;
+
+      ctx.save();
+      ctx.setTransform(a, b, c, d, e, f);
+      ctx.drawImage(image, sx, sy, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight);
+      ctx.restore();
+    }
+  }
+}