Image Cartoon Title Creator

async function processImage(originalImg, text = "CARTOON TITLE", fontSize = 120, fontColor = "#FFD700", outlineColor = "#00008B", outlineWidth = 15, fontFamily = "Luckiest Guy") {
    // 1. Dynamically load the Google Font.
    // We use an async function and await document.fonts.load to ensure the font is ready before we use it.
    const fontId = `google-font-${fontFamily.replace(/\s+/g, '-')}`;
    if (!document.getElementById(fontId)) {
        const link = document.createElement('link');
        link.id = fontId;
        link.rel = 'stylesheet';
        // Construct the Google Fonts URL from the font family name
        link.href = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/\s+/g, '+')}&display=swap`;
        document.head.appendChild(link);

        // Wait for the font to be loaded and ready to use
        try {
            await document.fonts.load(`${fontSize}px "${fontFamily}"`);
        } catch (e) {
            console.error('Font could not be loaded:', e);
            // Fallback to a generic sans-serif font if loading fails
            fontFamily = 'sans-serif';
        }
    }

    // 2. Create a canvas and set its dimensions to match the input image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 4. Set up the text style properties.
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 5. Calculate the position for the text (centered).
    const x = canvas.width / 2;
    const y = canvas.height / 2;
    
    // 6. Draw the text outline.
    ctx.strokeStyle = outlineColor;
    ctx.lineWidth = outlineWidth;
    // Set line join to 'round' for smoother corners on the outline.
    ctx.lineJoin = 'round';
    ctx.strokeText(text, x, y);

    // 7. Draw the filled text on top of the outline.
    ctx.fillStyle = fontColor;
    ctx.fillText(text, x, y);

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