Image Heart Cropper

/**
 * Crops an image into a heart shape. The heart will be centered and scaled
 * to fit the smaller dimension of the original image.
 *
 * @param {HTMLImageElement} originalImg The original image object to be cropped.
 * @returns {HTMLCanvasElement} A canvas element with the heart-cropped image.
 */
function processImage(originalImg) {
    // Create a new canvas element to draw on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions of the original image.
    const w = originalImg.width;
    const h = originalImg.height;

    // Set the canvas size to match the image.
    canvas.width = w;
    canvas.height = h;

    // --- Create a heart-shaped clipping path ---

    // The heart path is defined in a logical 100x100 coordinate system
    // and then scaled to fit within the smaller dimension of the image,
    // ensuring the heart is not distorted and is centered.
    const heartSize = Math.min(w, h);
    const offsetX = (w - heartSize) / 2;
    const offsetY = (h - heartSize) / 2;
    const scale = heartSize / 100;

    // A helper function to scale and offset our logical coordinates to the canvas.
    const p = (x, y) => ({
        x: x * scale + offsetX,
        y: y * scale + offsetY,
    });

    // Define the key points and control points for the heart path using Bezier curves.
    const topDip = p(50, 25);
    const bottomPoint = p(50, 95);

    // Right side control points
    const rightCp1 = p(90, 10);
    const rightCp2 = p(100, 50);

    // Left side control points (mirrored)
    const leftCp1 = p(0, 50);
    const leftCp2 = p(10, 10);

    // Begin drawing the path.
    ctx.beginPath();
    ctx.moveTo(topDip.x, topDip.y);

    // Draw the right side of the heart.
    ctx.bezierCurveTo(
        rightCp1.x, rightCp1.y,
        rightCp2.x, rightCp2.y,
        bottomPoint.x, bottomPoint.y
    );

    // Draw the left side of the heart.
    ctx.bezierCurveTo(
        leftCp1.x, leftCp1.y,
        leftCp2.x, leftCp2.y,
        topDip.x, topDip.y
    );

    ctx.closePath();

    // Set the current path as the clipping region.
    // Any subsequent drawing operations will only be visible inside this path.
    ctx.clip();

    // Draw the original image onto the canvas.
    // It will be automatically clipped to the heart shape.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Return the final canvas element which now contains the cropped image.
    return canvas;
}