Image Heart Shape Cropper

/**
 * Crops an image into the shape of a heart.
 *
 * @param {Image} originalImg The original image object to be cropped.
 * @returns {HTMLCanvasElement} A canvas element with the heart-shaped image.
 */
function processImage(originalImg) {
    // Create a new canvas element.
    const canvas = document.createElement('canvas');

    // To ensure the heart shape is not distorted, we use a square canvas.
    // The size of the square is determined by the smaller dimension of the original image.
    const size = Math.min(originalImg.width, originalImg.height);
    canvas.width = size;
    canvas.height = size;

    // Get the 2D rendering context.
    const ctx = canvas.getContext('2d');

    // Define the heart shape path.
    // This path is equivalent to a standard SVG heart shape, scaled to the canvas size.
    // The original path is based on a 300x300 canvas for easy scaling.
    const w = canvas.width;
    const h = canvas.height;
    const scaleX = w / 300;
    const scaleY = h / 300;

    ctx.beginPath();
    ctx.moveTo(150 * scaleX, 50 * scaleY);
    ctx.bezierCurveTo(100 * scaleX, 0, 0, 50 * scaleY, 50 * scaleX, 150 * scaleY);
    ctx.bezierCurveTo(100 * scaleX, 250 * scaleY, 200 * scaleX, 250 * scaleY, 250 * scaleX, 150 * scaleY);
    ctx.bezierCurveTo(300 * scaleX, 50 * scaleY, 200 * scaleX, 0, 150 * scaleX, 50 * scaleY);
    ctx.closePath();

    // Set the drawn path as the clipping region.
    ctx.clip();

    // Calculate the dimensions to draw the image to fill the entire heart shape (cover effect).
    const imgAspectRatio = originalImg.width / originalImg.height;
    const canvasAspectRatio = 1; // Our canvas is a square

    let drawWidth, drawHeight, x, y;

    if (imgAspectRatio > canvasAspectRatio) {
        // Image is wider than the canvas, so scale by height
        drawHeight = size;
        drawWidth = drawHeight * imgAspectRatio;
        x = (size - drawWidth) / 2; // Center horizontally
        y = 0;
    } else {
        // Image is taller than or same aspect as the canvas, so scale by width
        drawWidth = size;
        drawHeight = drawWidth / imgAspectRatio;
        x = 0;
        y = (size - drawHeight) / 2; // Center vertically
    }

    // Draw the original image onto the canvas, inside the clipped heart shape.
    ctx.drawImage(originalImg, x, y, drawWidth, drawHeight);

    // Return the canvas with the final heart-shaped image.
    return canvas;
}