Image Verb Title Generator

async function processImage(originalImg, verb = 'Exploring', noun = 'The World', font = 'Anton', fontSize = 12, textColor = '#FFFFFF', position = 'center') {
    /**
     * Dynamically loads a font from Google Fonts.
     * @param {string} fontName - The name of the font to load.
     * @returns {Promise<void>} A promise that resolves when the font is loaded.
     */
    const loadFont = async (fontName) => {
        const fontId = `google-font-${fontName.replace(/\s+/g, '-')}`;
        if (document.getElementById(fontId)) {
            // Font stylesheet is already added, assume it's loaded or loading.
            return;
        }

        const link = document.createElement('link');
        link.id = fontId;
        link.rel = 'stylesheet';
        link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s+/g, '+')}:wght@400;700&display=swap`;
        document.head.appendChild(link);

        // Wait for the font to be ready to use
        await document.fonts.load(`1em ${fontName}`);
    };

    // 1. Ensure the specified font is loaded and ready.
    try {
        await loadFont(font);
    } catch (e) {
        console.error("Font could not be loaded. Using a fallback font.", e);
        font = 'Arial'; // Use a web-safe fallback font
    }


    // 2. Create a canvas and get its 2D context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 3. Set canvas dimensions to match the original image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 4. Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0);

    // 5. Prepare the text and styling.
    const textLine1 = verb.toUpperCase();
    const textLine2 = `THE ${noun.toUpperCase()}`;
    const calculatedFontSize = canvas.height * (fontSize / 100);

    ctx.font = `bold ${calculatedFontSize}px ${font}, sans-serif`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // Add a shadow for better readability on various image backgrounds.
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = calculatedFontSize * 0.1;
    ctx.shadowOffsetX = calculatedFontSize * 0.05;
    ctx.shadowOffsetY = calculatedFontSize * 0.05;

    // 6. Calculate text position.
    const x = canvas.width / 2;
    let y1, y2;

    const lineSpacing = calculatedFontSize * 0.15;
    const padding = calculatedFontSize * 0.5;

    switch (position) {
        case 'top':
            y1 = padding;
            y2 = y1 + calculatedFontSize + lineSpacing;
            break;
        case 'bottom':
            // Calculate from the bottom up to position the entire text block.
            const bottomEdge = canvas.height - padding;
            const totalTextHeight = calculatedFontSize * 2 + lineSpacing;
            y1 = bottomEdge - totalTextHeight;
            y2 = y1 + calculatedFontSize + lineSpacing;
            break;
        case 'center':
        default:
            // Center the gap between the two lines of text at the canvas's vertical midpoint.
            const verticalCenter = canvas.height / 2;
            y1 = verticalCenter - lineSpacing / 2 - calculatedFontSize;
            y2 = verticalCenter + lineSpacing / 2;
            break;
    }

    // 7. Draw the text onto the canvas.
    ctx.fillText(textLine1, x, y1);
    ctx.fillText(textLine2, x, y2);

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