Image Heart Shape Generator

/**
 * Crops an image into a heart shape.
 *
 * @param {HTMLImageElement} originalImg The original image object to be processed.
 * @returns {HTMLCanvasElement} A canvas element displaying the image cropped into a heart shape.
 */
function processImage(originalImg) {
    // Create a new canvas element.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Begin drawing the heart path.
    // This path will be used as a clipping mask.
    ctx.beginPath();

    // Start at the top-center dip of the heart. The coordinates are relative
    // to the canvas size to ensure the heart scales with the image.
    ctx.moveTo(w / 2, h * 0.35);

    // Draw the left side of the heart using a cubic Bezier curve.
    // The control points are carefully chosen to create a smooth, rounded lobe.
    ctx.bezierCurveTo(
        w * 0.1, h * 0.1,   // Control point 1 (pulls curve towards top-left)
        0, h * 0.6,         // Control point 2 (pulls curve towards mid-left)
        w / 2, h * 0.95    // End point (bottom tip of the heart)
    );

    // Draw the right side of the heart, creating a symmetrical shape.
    ctx.bezierCurveTo(
        w, h * 0.6,         // Control point 1 (pulls curve towards mid-right)
        w * 0.9, h * 0.1,   // Control point 2 (pulls curve towards top-right)
        w / 2, h * 0.35    // End point (back to the starting dip)
    );

    ctx.closePath();

    // Apply the heart path as a clipping region.
    // Subsequent drawing operations will only be visible inside this path.
    ctx.clip();

    // Draw the original image onto the canvas.
    // The clipping region will make it appear heart-shaped.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Return the final canvas element.
    return canvas;
}