Image Movie Poster Creator

async function processImage(originalImg, title = 'MOVIE TITLE', tagline = 'A tagline for the movie goes here.', credits = 'STARRING A FAMOUS ACTOR • AND ANOTHER FAMOUS ACTOR\nA FILM BY THE DIRECTOR', releaseDate = 'COMING SOON', textColor = '#ffffff', backgroundColor = '#000000') {

    /**
     * Dynamically loads necessary Google Fonts.
     * This function ensures that the fonts are available before drawing on the canvas.
     */
    const loadFonts = async () => {
        const fontId = 'movie-poster-fonts-style';
        if (!document.getElementById(fontId)) {
            const fontStyle = document.createElement('style');
            fontStyle.id = fontId;
            fontStyle.innerHTML = `
                @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');
            `;
            document.head.appendChild(fontStyle);
            // Wait for both fonts to be loaded and ready to use.
            await Promise.all([
                document.fonts.load('140px "Bebas Neue"'),
                document.fonts.load('1em "Montserrat"')
            ]);
        }
    };

    await loadFonts();

    // Standard movie poster aspect ratio (27:40)
    const posterWidth = 810;
    const posterHeight = 1200;

    const canvas = document.createElement('canvas');
    canvas.width = posterWidth;
    canvas.height = posterHeight;
    const ctx = canvas.getContext('2d');

    // Draw the solid background color
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, posterWidth, posterHeight);

    // --- Draw the Image (Cover Style) ---
    // The image will cover the top 70% of the poster.
    const imageAreaHeight = posterHeight * 0.7;
    
    // Calculate aspect ratios to fit the image like 'background-size: cover'
    const imgRatio = originalImg.naturalWidth / originalImg.naturalHeight;
    const areaRatio = posterWidth / imageAreaHeight;

    let sx, sy, sWidth, sHeight;

    if (imgRatio > areaRatio) { // Image is wider than the area
        sHeight = originalImg.naturalHeight;
        sWidth = sHeight * areaRatio;
        sx = (originalImg.naturalWidth - sWidth) / 2;
        sy = 0;
    } else { // Image is taller or has the same ratio
        sWidth = originalImg.naturalWidth;
        sHeight = sWidth / areaRatio;
        sx = 0;
        sy = (originalImg.naturalHeight - sHeight) / 2;
    }
    
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, posterWidth, imageAreaHeight);

    // Add a gradient overlay at the bottom of the image to blend it into the background
    const gradient = ctx.createLinearGradient(0, imageAreaHeight - 250, 0, imageAreaHeight);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, backgroundColor); // Fades to the poster background color
    ctx.fillStyle = gradient;
    ctx.fillRect(0, imageAreaHeight - 250, posterWidth, 250);

    // --- Draw Text Elements ---
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Draw Tagline
    ctx.font = '28px "Montserrat"';
    ctx.fillText(tagline.toUpperCase(), posterWidth / 2, imageAreaHeight + 70);

    // Draw Title
    ctx.font = '140px "Bebas Neue"';
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.fillText(title.toUpperCase(), posterWidth / 2, imageAreaHeight + 160);
    // Reset shadow for other text
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Draw Release Date
    ctx.font = 'bold 24px "Montserrat"';
    ctx.fillText(releaseDate.toUpperCase(), posterWidth / 2, imageAreaHeight + 260);


    // Draw Credits Block (Billing Block) at the bottom
    const creditsCenterY = posterHeight - 70;
    ctx.font = '14px "Montserrat"';
    // Use letterSpacing for the classic condensed credit block look
    try {
      ctx.letterSpacing = '2px';
    } catch (e) {
      console.warn("ctx.letterSpacing is not supported in this browser.");
    }
    
    // Support for multiline credits using '\n'
    const creditLines = credits.toUpperCase().split('\n');
    const lineHeight = 18;
    const totalCreditsHeight = creditLines.length * lineHeight;
    let currentY = creditsCenterY - (totalCreditsHeight / 2) + (lineHeight / 2);

    creditLines.forEach(line => {
        ctx.fillText(line.trim(), posterWidth / 2, currentY);
        currentY += lineHeight;
    });
    
    // Reset letter spacing
    try {
      ctx.letterSpacing = '0px';
    } catch (e) { /* ignore */ }

    return canvas;
}