Image Cartoon Title Generator

async function processImage(originalImg, titleText = "Cartoon Title", subtitleText = "An Awesome Adventure", fontColor = "yellow", strokeColor = "blue") {
    /**
     * Dynamically loads a font if not already available.
     * @param {string} family The font-family name.
     * @param {string} url The URL to the font file (e.g., woff2).
     */
    const loadFont = async (family, url) => {
        if (document.fonts && !document.fonts.check(`1em ${family}`)) {
            const font = new FontFace(family, `url(${url})`);
            try {
                await font.load();
                document.fonts.add(font);
            } catch (err) {
                console.error(`Font '${family}' could not be loaded: `, err);
            }
        }
    };

    // 1. Load the cartoon font from Google Fonts.
    // "Bangers" is a font with a classic comic/cartoon style.
    const fontName = 'Bangers';
    await loadFont(fontName, 'https://fonts.gstatic.com/s/bangers/v24/FeVQS0BTqb0h60ACL5k.woff2');

    // 2. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 4. Set common text styles for the cartoon effect
    ctx.fillStyle = fontColor;
    ctx.strokeStyle = strokeColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.lineJoin = 'round'; // For smoother stroke corners on text

    // --- 5. Draw the Main Title (with an arc) ---
    if (titleText && titleText.trim() !== "") {
        const mainTitleSize = Math.max(40, canvas.width / 10);
        // Use quotes around the font name for safety, with web-safe fallbacks.
        ctx.font = `${mainTitleSize}px "${fontName}", Impact, sans-serif`;
        ctx.lineWidth = mainTitleSize / 8;

        // Arc geometry calculation
        const arcCenterX = canvas.width / 2;
        const arcRadius = canvas.width * 0.9;

        // Position the top of the center character at 15% from the top of the image
        const centerCharTopY = canvas.height * 0.15;
        const centerCharBaselineY = centerCharTopY + (mainTitleSize / 2);
        // Calculate the arc's center Y so the text arc appears at the correct height
        const arcCenterY = centerCharBaselineY + arcRadius;

        // Calculate how much the text should curve. More curve for longer text, up to a limit.
        const angleSpan = Math.min(Math.PI / 2.5, titleText.length * 0.09);
        const startAngle = -angleSpan / 2 - Math.PI / 2; // Start from the left of the top center
        const angleStep = titleText.length > 1 ? angleSpan / (titleText.length - 1) : 0;

        let lowestTextY = centerCharBaselineY; // Keep track of the lowest point for subtitle positioning

        for (let i = 0; i < titleText.length; i++) {
            const char = titleText[i];
            const angle = startAngle + i * angleStep;

            // Calculate character position on the arc
            const x = arcCenterX + arcRadius * Math.cos(angle);
            const y = arcCenterY + arcRadius * Math.sin(angle);

            // Update the lowest Y position encountered
            if (y > lowestTextY) {
                lowestTextY = y;
            }

            ctx.save();
            ctx.translate(x, y);
            // Rotate the context so the character is drawn upright along the curve
            ctx.rotate(angle + Math.PI / 2);

            // Draw stroke first, then fill for a clean outline
            ctx.strokeText(char, 0, 0);
            ctx.fillText(char, 0, 0);

            ctx.restore();
        }

        // --- 6. Draw the Subtitle (straight) ---
        if (subtitleText && subtitleText.trim() !== "") {
            const subtitleSize = Math.max(20, canvas.width / 25);
            ctx.font = `${subtitleSize}px "${fontName}", Impact, sans-serif`;
            ctx.lineWidth = subtitleSize / 8;

            const subtitleX = canvas.width / 2;
            // Position subtitle below the lowest point of the arc text, plus some padding
            const subtitleY = lowestTextY + (mainTitleSize / 2) + (subtitleSize * 0.7);

            ctx.strokeText(subtitleText, subtitleX, subtitleY);
            ctx.fillText(subtitleText, subtitleX, subtitleY);
        }
    }


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