Image Captioned Polaroid Generator

/**
 * Asynchronously turns an image into a captioned polaroid.
 * This function is async because it may need to dynamically load Google Fonts.
 *
 * @param {Image} originalImg The original image object to be placed in the polaroid.
 * @param {string} [captionText="A beautiful memory"] The caption text. Use '\n' to create multiple lines.
 * @param {string} [fontName="Permanent Marker"] The font for the caption. Supports web-safe fonts and a selection of Google Fonts (e.g., "Caveat", "Kalam", "Indie Flower").
 * @param {number} [fontSize=24] The font size of the caption in pixels.
 * @param {string} [textColor="#333333"] The hexadecimal color of the caption text.
 * @param {string} [backgroundColor="#FFFFFF"] The background color of the polaroid frame.
 * @param {number} [padding=20] The padding for the top, left, and right sides of the image in pixels.
 * @param {number} [polaroidRatio=3.5] The ratio determining the bottom border's height relative to the other borders. E.g., a value of 3 means the bottom border is 3 times taller than the top border.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the generated canvas element.
 */
async function processImage(originalImg, captionText = "A beautiful memory", fontName = "Permanent Marker", fontSize = 24, textColor = "#333333", backgroundColor = "#FFFFFF", padding = 20, polaroidRatio = 3.5) {

    // A selection of popular handwritten-style Google Fonts
    const googleFonts = {
        "Permanent Marker": "Permanent+Marker",
        "Caveat": "Caveat",
        "Kalam": "Kalam",
        "Shadows Into Light": "Shadows+Into+Light",
        "Amatic SC": "Amatic+SC",
        "Indie Flower": "Indie+Flower",
        "Patrick Hand": "Patrick+Hand"
    };

    // Dynamically load the font if it's a Google Font and not already available.
    if (googleFonts[fontName]) {
        const fontId = `font-style-${googleFonts[fontName].replace('+', '-')}`;
        if (!document.getElementById(fontId)) {
            const link = document.createElement('link');
            link.id = fontId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=${googleFonts[fontName]}&display=swap`;
            document.head.appendChild(link);
            // Wait for the font to be ready before attempting to use it on the canvas
            try {
                await document.fonts.load(`${fontSize}px "${fontName}"`);
            } catch (e) {
                console.error(`Font ${fontName} could not be loaded. Browser will use a fallback font.`, e);
            }
        }
    }

    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate the dimensions of the final polaroid canvas
    const topPadding = padding;
    const sidePadding = padding;
    const bottomPadding = padding * polaroidRatio;

    canvas.width = originalImg.width + 2 * sidePadding;
    canvas.height = originalImg.height + topPadding + bottomPadding;

    // Draw the polaroid background frame
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Add a subtle shadow to the inner image to give it a realistic depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    ctx.shadowBlur = Math.max(10, padding * 0.75);
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = Math.max(4, padding * 0.25);

    // Draw the original image onto the canvas, inside the frame
    ctx.drawImage(originalImg, sidePadding, topPadding, originalImg.width, originalImg.height);

    // Reset shadow effects so they don't apply to the text
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Process and draw the caption text if it exists
    const lines = captionText.split('\n').filter(line => line.trim() !== '');
    if (lines.length > 0) {
        // Set text properties
        ctx.font = `${fontSize}px "${fontName}"`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle'; // Aligns text vertically to its center, simplifying positioning

        const lineHeight = fontSize * 1.2;

        // Calculate the vertical center of the bottom caption area
        const textAreaYStart = topPadding + originalImg.height;
        const textAreaCenterY = textAreaYStart + (bottomPadding / 2);

        // Calculate the starting y-position for the first line of text.
        // This centers the entire block of text vertically within the caption area.
        const totalTextCenterSeparation = (lines.length - 1) * lineHeight;
        const firstLineY = textAreaCenterY - (totalTextCenterSeparation / 2);

        // Draw each line of text
        lines.forEach((line, index) => {
            ctx.fillText(line.trim(), canvas.width / 2, firstLineY + (index * lineHeight));
        });
    }

    // Return the final canvas element
    return canvas;
}