apexify.js 4.5.56 → 4.5.58

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

@@ -8,6 +8,7 @@ exports.createGradient = createGradient;
 exports.applyRotation = applyRotation;
 exports.imageRadius = imageRadius;
 exports.objectRadius = objectRadius;
+exports.applyPerspective = applyPerspective;
 /**
  * Applies shadow to the canvas context.
  * @param ctx The canvas rendering context.
@@ -25,7 +26,9 @@ function applyShadow(ctx, shadow, x, y, width, height) {
         const shadowX = x + (shadow.offsetX ?? 0);
         const shadowY = y + (shadow.offsetY ?? 0);
         objectRadius(ctx, shadowX, shadowY, width, height, shadow.borderRadius ?? 2, 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();
     }
     ctx.filter = "none";
@@ -43,7 +46,6 @@ function applyZoom(ctx, zoom) {
     const scale = zoom.scale ?? 1;
     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);
@@ -64,39 +66,29 @@ function applyStroke(ctx, stroke, x, y, width, height) {
     if (!stroke)
         return;
     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 adjustedX = Math.max(0, x - totalOffset);
+    const adjustedY = Math.max(0, 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, adjustedX, adjustedY, adjustedWidth, adjustedHeight, stroke.borderRadius ?? 2, "all");
         ctx.stroke();
         ctx.restore();
         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;
@@ -109,7 +101,6 @@ function applyStroke(ctx, stroke, x, y, width, height) {
             ctx.quadraticCurveTo(adjustedX + adjustedWidth, adjustedY, adjustedX + adjustedWidth, adjustedY + tr);
         }
     }
-    // --- Right Edge ---
     if (positions.includes("right") ||
         positions.includes("top-right") ||
         positions.includes("bottom-right")) {
@@ -125,7 +116,6 @@ function applyStroke(ctx, stroke, x, y, width, height) {
             ctx.quadraticCurveTo(adjustedX + adjustedWidth, adjustedY + adjustedHeight, adjustedX + adjustedWidth - br, adjustedY + adjustedHeight);
         }
     }
-    // --- Bottom Edge ---
     if (positions.includes("bottom") ||
         positions.includes("bottom-left") ||
         positions.includes("bottom-right")) {
@@ -141,7 +131,6 @@ function applyStroke(ctx, stroke, x, y, width, height) {
             ctx.quadraticCurveTo(adjustedX + adjustedWidth, adjustedY + adjustedHeight, adjustedX + adjustedWidth, adjustedY + adjustedHeight - br);
         }
     }
-    // --- Left Edge ---
     if (positions.includes("left") ||
         positions.includes("top-left") ||
         positions.includes("bottom-left")) {
@@ -161,150 +150,179 @@ function applyStroke(ctx, stroke, x, y, width, height) {
     ctx.restore();
 }
 /**
- * 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.
  */
 function drawShape(ctx, shapeSettings) {
-    const { source, x, y, width, height, rotation, borderRadius, borderPosition, stroke, shadow, isFilled, color, gradient } = shapeSettings;
+    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();
+        case 'circle': {
             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);
+        }
+        case 'square': {
+            ctx.rect(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);
+        }
+        case 'triangle': {
+            ctx.moveTo(x + width / 2, y);
+            ctx.lineTo(x, y + height);
             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));
+        }
+        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 '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 '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));
-            }
+        }
+        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 '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));
-            }
+        }
+        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 '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));
-            }
+        }
+        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();
-        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));
-            }
+            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 '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);
+        }
+        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();
-            if (isFilled) {
-                ctx.fillStyle = color;
-                ctx.fill();
-            }
-            else {
-                applyStroke(ctx, stroke, x, y, width, height);
-            }
-            ctx.restore();
             break;
-        default:
+        }
+        default: {
+            ctx.restore();
             throw new Error(`Unsupported shape: ${shapeName}`);
+        }
     }
     if (isFilled) {
-        if (borderRadius) {
+        if (borderRadius && shapeName !== 'circle' && shapeName !== 'oval') {
             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();
+        }
+        if (gradient) {
+            const gradFill = createGradient(ctx, gradient, x, y, x + width, y + height);
+            ctx.fillStyle = gradFill;
         }
         else {
-            if (gradient) {
-                const gradientFill = createGradient(ctx, gradient, x, y, x + width, y + height);
-                ctx.fillStyle = gradientFill;
-            }
-            else {
-                ctx.fillStyle = color || "transparent";
-            }
-            if (shapeName === 'square') {
-                ctx.fillRect(x, y, width, height);
-            }
-            else if (shapeName === 'circle') {
-                ctx.fill();
-            }
-            else {
-                ctx.fill();
-            }
+            ctx.fillStyle = color;
         }
-        applyStroke(ctx, stroke, x, y, width, height);
+        ctx.fill();
     }
-    else {
-        if (gradient) {
-            const gradientFill = createGradient(ctx, gradient, x, y, x + width, y + height);
-            ctx.fillStyle = gradientFill;
-        }
+    if (stroke) {
         applyStroke(ctx, stroke, x, y, width, height);
     }
     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, 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.closePath();
+}
 function createGradient(ctx, gradientOptions, startX, startY, endX, endY) {
     if (!gradientOptions || !gradientOptions.type || !gradientOptions.colors) {
         throw new Error("Invalid gradient options. Provide a valid object with type and colors properties.");
@@ -360,7 +378,6 @@ function createGradient(ctx, gradientOptions, startX, startY, endX, endY) {
  * @param height The height of the shape.
  */
 function applyRotation(ctx, rotation, x, y, width, height) {
-    // Check is not really necessary since 0 is valid.
     const rotationX = x + width / 2;
     const rotationY = y + height / 2;
     ctx.translate(rotationX, rotationY);
@@ -368,35 +385,70 @@ function applyRotation(ctx, rotation, x, y, width, height) {
     ctx.translate(-rotationX, -rotationY);
 }
 /**
- * Applies border radius to the canvas context.
+ * Applies border radius to the canvas context with selective corner support.
+ *
  * @param ctx The canvas rendering context.
- * @param image The image properties containing the border radius.
+ * @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.
-* @param borderPosition The border radius position to be applied on.
+ * @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")
  */
-function imageRadius(ctx, image, x, y, width, height, borderRadius, borderPosition = 'all') {
+function imageRadius(ctx, image, x, y, width, height, borderRadius, borderPosition = "all") {
     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 = 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();
@@ -418,20 +470,17 @@ function imageRadius(ctx, image, x, y, width, height, borderRadius, borderPositi
  */
 function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPosition = 'all') {
     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;
         let roundBottomLeft = false;
         const bp = borderPosition.trim().toLowerCase();
-        // If a simple keyword is provided, handle those cases:
         if (bp === 'all') {
             roundTopLeft = roundTopRight = roundBottomRight = roundBottomLeft = true;
         }
@@ -460,23 +509,18 @@ function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPositi
             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'));
             roundBottomRight = positions.includes('bottom-right') || (positions.includes('bottom') && positions.includes('right'));
             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);
@@ -484,7 +528,6 @@ function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPositi
         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);
@@ -492,7 +535,6 @@ function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPositi
         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);
@@ -500,7 +542,6 @@ function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPositi
         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);
@@ -511,10 +552,72 @@ function objectRadius(ctx, x, y, width, height, borderRadius = 0.1, borderPositi
         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, t, u) {
+    const top = {
+        x: corners[0].x * (1 - t) + corners[1].x * t,
+        y: corners[0].y * (1 - t) + corners[1].y * t,
+    };
+    const bottom = {
+        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).
+ */
+async function applyPerspective(ctx, image, x, y, width, height, perspective, gridCols = 10, gridRows = 10) {
+    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();
+        }
+    }
+}
 //# sourceMappingURL=imageProperties.js.map