Image Heart Shape Cropping Tool

/**
 * Crops an image into a heart shape.
 * The function takes a center square portion of the original image
 * and applies a heart-shaped clip to it. The resulting heart-shaped
 * image will have a transparent background outside the heart.
 *
 * @param {HTMLImageElement} originalImg The original image object to be cropped.
 * @returns {HTMLCanvasElement} A canvas element containing the heart-shaped image.
 */
function processImage(originalImg) {
    // Determine the largest possible square to crop from the center of the image.
    const size = Math.min(originalImg.width, originalImg.height);
    const sx = (originalImg.width - size) / 2;
    const sy = (originalImg.height - size) / 2;

    // Create a new canvas that is a square of the determined size.
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Define the heart shape path. The coordinates are scaled to the canvas size
    // to ensure the heart shape fills the entire canvas.
    const w = canvas.width;
    const h = canvas.height;
    
    ctx.beginPath();
    
    // Start drawing from the bottom point of the heart
    ctx.moveTo(w / 2, h);
    
    // Draw the left side of the heart using two Bezier curves for a smooth shape.
    // The first curve goes from the bottom point to the widest part on the left.
    ctx.bezierCurveTo(w / 4, h * 0.85, 0, h * 0.6, 0, h / 3);
    // The second curve goes from the side to the top-center dip of the heart.
    ctx.bezierCurveTo(0, h / 10, w / 4, 0, w / 2, h / 4);
    
    // Draw the right side of the heart, mirroring the left side curves.
    // The first curve for the right side goes from the top-center dip to the widest part on the right.
    ctx.bezierCurveTo(w * 3 / 4, 0, w, h / 10, w, h / 3);
    // The second curve goes from the side back to the bottom point.
    ctx.bezierCurveTo(w, h * 0.6, w * 3 / 4, h * 0.85, w / 2, h);
    
    ctx.closePath();

    // Set the created path as the clipping region. Any drawing after this
    // will only be visible within this path.
    ctx.clip();

    // Draw the cropped square from the original image onto the canvas.
    // Because of the clipping, only the part of the image inside the heart path will be drawn.
    ctx.drawImage(
        originalImg, // The source image
        sx,          // The x-coordinate of the top-left corner of the source rectangle
        sy,          // The y-coordinate of the top-left corner of the source rectangle
        size,        // The width of the source rectangle
        size,        // The height of the source rectangle
        0,           // The x-coordinate of the top-left corner of the destination rectangle on the canvas
        0,           // The y-coordinate of the top-left corner of the destination rectangle on the canvas
        w,           // The width to draw the image on the canvas
        h            // The height to draw the image on the canvas
    );
    
    // The canvas now holds the final heart-shaped image.
    return canvas;
}