Image Cropper To Classic Heart Shape

/**
 * Crops an image to a classic heart shape.
 * The output will be a square canvas with the heart-shaped image centered within it.
 * The size of the canvas is determined by the smaller dimension of the original image.
 *
 * @param {Image} originalImg The original image object to be processed.
 * @returns {HTMLCanvasElement} A new canvas element containing the heart-shaped image.
 */
function processImage(originalImg) {
    // Determine the size for the output canvas. A square is ideal for a symmetrical heart.
    // We use the smaller dimension of the original image to create this square, ensuring the entire heart can fit.
    const size = Math.min(originalImg.naturalWidth, originalImg.naturalHeight);

    // Create a new canvas element in memory.
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    const w = canvas.width;
    const h = canvas.height;

    // Define the heart shape clipping path using two Bezier curves.
    // The coordinates are scaled relative to the canvas size to work for any input image.
    // Using control points outside the canvas bounds (e.g., -w*0.1) creates a fuller, more rounded shape.
    ctx.beginPath();
    // Start at the top-center dip of the heart.
    ctx.moveTo(w / 2, h * 0.4);
    
    // Draw the left curve of the heart down to the bottom point.
    ctx.bezierCurveTo(
        w * 0.2, h * 0.1,  // First control point (shapes the top-left curve)
       -w * 0.1, h * 0.6,  // Second control point (shapes the mid-left side)
        w / 2,   h * 0.95  // End point (the bottom tip of the heart)
    );
    
    // Draw the right curve of the heart from the bottom point back to the top-center dip.
    // The control points are symmetrical to the left side's points.
    ctx.bezierCurveTo(
        w * 1.1,  h * 0.6,  // First control point (shapes the mid-right side)
        w * 0.8,  h * 0.1,  // Second control point (shapes the top-right curve)
        w / 2,    h * 0.4   // End point (back to the start)
    );
    ctx.closePath();

    // Apply the heart path as a clipping mask. All subsequent drawing operations will be
    // confined to the area inside this path.
    ctx.clip();

    // To center the image within the heart, we calculate the source rectangle (sx, sy, sWidth, sHeight)
    // from the middle of the original image.
    const sx = (originalImg.naturalWidth - size) / 2;
    const sy = (originalImg.naturalHeight - size) / 2;
    const sWidth = size;
    const sHeight = size;

    // Draw the calculated portion of the original image onto the canvas.
    // It will be cropped by the active clipping mask.
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, w, h);

    // Return the newly created canvas element.
    return canvas;
}