Image Heart Music Note Creator

/**
 * Creates a "Heart Music Note" by placing the provided image inside a heart shape,
 * which serves as the head of a musical note (a quaver or eighth note).
 *
 * @param {Image} originalImg The original image object to place inside the heart.
 * @param {string} [noteColor='#000000'] The color of the note's stem, flag, and heart outline.
 * @param {number} [noteWidth=10] The thickness of the note's stem and the heart outline.
 * @param {number} [canvasSize=512] The width and height of the output square canvas.
 * @returns {HTMLCanvasElement} A canvas element with the generated image.
 */
function processImage(originalImg, noteColor = '#000000', noteWidth = 10, canvasSize = 512) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    canvas.width = canvasSize;
    canvas.height = canvasSize;
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // 2. Define geometry
    // Center the heart in the lower part of the canvas to leave room for the stem.
    const heartWidth = canvasSize * 0.45;
    const heartHeight = heartWidth * 0.9;
    const heartRefX = canvasSize / 2;
    const heartRefY = canvasSize - heartHeight - (canvasSize * 0.1); // Place heart near bottom

    // Stem geometry is relative to the heart.
    const stemX = heartRefX + heartWidth / 2 - (noteWidth * 1.5); // Attach to right side of heart
    const stemConnectionY = heartRefY + heartHeight * 0.3;
    const stemHeight = heartHeight * 1.5;
    const stemTopY = stemConnectionY - stemHeight;

    /**
     * Helper function to draw a heart path.
     * The reference point (x, y) is the top-center indent of the heart.
     */
    const createHeartPath = (context, x, y, w, h) => {
        context.beginPath();
        context.moveTo(x, y + h * 0.25);
        context.bezierCurveTo(x, y, x - w / 2, y, x - w / 2, y + h * 0.25);
        context.bezierCurveTo(x - w / 2, y + h * 0.55, x, y + h * 0.8, x, y + h);
        context.bezierCurveTo(x, y + h * 0.8, x + w / 2, y + h * 0.55, x + w / 2, y + h * 0.25);
        context.bezierCurveTo(x + w / 2, y, x, y, x, y + h * 0.25);
        context.closePath();
    };

    // 3. Clip and Draw Image inside the Heart
    ctx.save();
    createHeartPath(ctx, heartRefX, heartRefY, heartWidth, heartHeight);
    ctx.clip();

    // Calculate image scaling to cover the heart's bounding box
    const bBoxX = heartRefX - heartWidth / 2;
    const bBoxY = heartRefY;
    const bBoxW = heartWidth;
    const bBoxH = heartHeight;
    const imgAspectRatio = originalImg.naturalWidth / originalImg.naturalHeight;
    const bBoxAspectRatio = bBoxW / bBoxH;

    let scaledWidth, scaledHeight, destX, destY;

    if (imgAspectRatio > bBoxAspectRatio) {
        // Image is wider than heart bbox, scale to fit height
        scaledHeight = bBoxH;
        scaledWidth = scaledHeight * imgAspectRatio;
        destX = bBoxX - (scaledWidth - bBoxW) / 2;
        destY = bBoxY;
    } else {
        // Image is taller or same aspect ratio, scale to fit width
        scaledWidth = bBoxW;
        scaledHeight = scaledWidth / imgAspectRatio;
        destX = bBoxX;
        destY = bBoxY - (scaledHeight - bBoxH) / 2;
    }
    ctx.drawImage(originalImg, destX, destY, scaledWidth, scaledHeight);
    ctx.restore(); // Clipping is now removed

    // 4. Draw the Note Elements (Stem, Outline, Flag)
    ctx.strokeStyle = noteColor;
    ctx.fillStyle = noteColor;
    ctx.lineWidth = noteWidth;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Draw stem first, so the heart outline draws cleanly over the connection point.
    ctx.beginPath();
    ctx.moveTo(stemX, stemConnectionY);
    ctx.lineTo(stemX, stemTopY);
    ctx.stroke();

    // Draw heart outline
    createHeartPath(ctx, heartRefX, heartRefY, heartWidth, heartHeight);
    ctx.stroke();

    // Draw the quaver flag
    const flagTop = stemTopY;
    const flagWidth = heartWidth * 0.6;
    const flagHeight = heartHeight * 0.7;
    const stemTopLeftX = stemX - noteWidth / 2;

    ctx.beginPath();
    ctx.moveTo(stemTopLeftX, flagTop);
    
    // Outer curve of the flag
    ctx.quadraticCurveTo(
        stemX + flagWidth,          // Control Point X (pushes curve to the right)
        flagTop + flagHeight * 0.2, // Control Point Y
        stemX + flagWidth * 0.3,    // End Point X
        flagTop + flagHeight        // End Point Y (lowest point of the flag)
    );
    
    // Inner curve to bring it back to the stem
    ctx.quadraticCurveTo(
        stemX + flagWidth * 0.4,    // Control Point X
        flagTop + flagHeight * 0.6, // Control Point Y
        stemTopLeftX,               // End Point X (back to the stem)
        flagTop + noteWidth         // End Point Y (slightly below the top to create thickness)
    );
    
    ctx.closePath();
    ctx.fill();

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