Lights Out Sky Scream Roller Coaster Movie Poster Generator

async function processImage(
    originalImg,
    mainTitle = "LIGHTS OUT",
    subTitle = "SKY SCREAM",
    releaseDate = "JULY 2019",
    tagline = "THE ULTIMATE ROLLER COASTER MOVIE",
    tintColor = "#0f171e", // Cinematic dark blue/gray tint
    highlightColor = "#e50914" // Cinematic horror red
) {
    // 1. Dynamically load web fonts (Google Fonts: Anton and Oswald)
    const fontURL = 'https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300;700&display=swap';
    const link = document.createElement('link');
    link.href = fontURL;
    link.rel = 'stylesheet';
    document.head.appendChild(link);

    // Wait for the fonts to be loaded before drawing onto the canvas
    await new Promise(resolve => {
        let attempts = 0;
        const fontCheck = setInterval(() => {
            attempts++;
            // Check if both fonts are resolved or max attempts reached (3 seconds)
            if (
                (document.fonts.check('100px Anton') && document.fonts.check('100px Oswald')) || 
                attempts > 30
            ) {
                clearInterval(fontCheck);
                resolve();
            }
        }, 100);
    });

    // 2. Prepare the Canvas (Standard movie poster 2:3 aspect ratio)
    const canvas = document.createElement('canvas');
    const W = 800;
    const H = 1200;
    canvas.width = W;
    canvas.height = H;
    const ctx = canvas.getContext('2d');

    // 3. Draw and cover-scale the original image
    const scale = Math.max(W / originalImg.width, H / originalImg.height);
    const w = originalImg.width * scale;
    const h = originalImg.height * scale;
    const x = (W - w) / 2;
    const y = (H - h) / 2;
    ctx.drawImage(originalImg, x, y, w, h);

    // 4. Color Grading (Cinematic Effect)
    // Dark Tint Filter
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillStyle = tintColor;
    ctx.fillRect(0, 0, W, H);
    
    // Contrast enhancing overlay
    ctx.globalCompositeOperation = 'overlay';
    ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
    ctx.fillRect(0, 0, W, H);
    
    ctx.globalCompositeOperation = 'source-over'; // Reset blend mode

    // Radial Vignette (Darkening the edges heavily to focus on the center and text)
    const vignette = ctx.createRadialGradient(W / 2, H / 2, 100, W / 2, H / 2, H * 0.7);
    vignette.addColorStop(0, 'rgba(0, 0, 0, 0)');
    vignette.addColorStop(0.5, 'rgba(0, 0, 0, 0.6)');
    vignette.addColorStop(1, 'rgba(0, 0, 0, 0.95)');
    ctx.fillStyle = vignette;
    ctx.fillRect(0, 0, W, H);

    // 5. Drawing Typography / Poster Elements
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper for glowing/shadowed text
    const drawText = (text, posX, posY, font, fillStyle, shadowColor, shadowBlur = 20) => {
        ctx.font = font;
        ctx.shadowColor = shadowColor;
        ctx.shadowBlur = shadowBlur;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 5;
        ctx.fillStyle = fillStyle;
        ctx.fillText(text, posX, posY);
        // Reset shadow
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
    };

    // Helper for adding letter spacing emulation via split/join
    const applySpacing = (text, spaces = 1) => text.split('').join(' '.repeat(spaces));

    // Top: Tagline
    drawText(
        applySpacing("PREPARE FOR THE DROP"), 
        W / 2, 
        120, 
        '30px Oswald', 
        'rgba(255, 255, 255, 0.8)', 
        '#000000', 
        10
    );

    // Top-Mid: Main Title 1 (Lights Out)
    drawText(
        mainTitle.toUpperCase(), 
        W / 2, 
        230, 
        '140px Anton', 
        '#ffffff', 
        'rgba(0, 0, 0, 0.9)', 
        25
    );

    // Bottom-Mid: SubTitle Graphic (Sky Scream)
    // Creating an intense blood-red vertical gradient for this text
    const redGradient = ctx.createLinearGradient(0, 700, 0, 850);
    redGradient.addColorStop(0, '#ff4b4b');
    redGradient.addColorStop(0.4, highlightColor);
    redGradient.addColorStop(1, '#600000');
    
    // Add text stroke and glow
    ctx.font = '160px Anton';
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#ffffff';
    ctx.shadowColor = '#000000';
    ctx.shadowBlur = 30;
    ctx.shadowOffsetY = 10;
    ctx.strokeText(subTitle.toUpperCase(), W / 2, 780);
    ctx.shadowBlur = 0; // Turn off shadow so fill is clean
    ctx.fillStyle = redGradient;
    ctx.fillText(subTitle.toUpperCase(), W / 2, 780);

    // Bottom: Secondary Tagline
    drawText(
        applySpacing(tagline.toUpperCase(), 1), 
        W / 2, 
        900, 
        'bold 35px Oswald', 
        '#cccccc', 
        '#000000', 
        15
    );

    // Bottom: Release Date (July 2019)
    drawText(
        releaseDate.toUpperCase(), 
        W / 2, 
        1020, 
        '80px Oswald', 
        highlightColor, 
        '#000000', 
        20
    );

    // Bottom: Mock Cinematic Credits Block
    const fakeCredits1 = "EXECUTIVE PRODUCER J. DOE  DIRECTOR OF PHOTOGRAPHY A. SMITH  MUSIC BY CINEMATIC SOUNDS";
    const fakeCredits2 = "PRODUCED BY STUDIO LIGHTS  DIRECTED BY S. JOHNSON";
    drawText(
        fakeCredits1, 
        W / 2, 
        1130, 
        '300 18px Oswald', 
        'rgba(255, 255, 255, 0.5)', 
        '#000000', 
        5
    );
    drawText(
        fakeCredits2, 
        W / 2, 
        1160, 
        '300 18px Oswald', 
        'rgba(255, 255, 255, 0.5)', 
        '#000000', 
        5
    );

    return canvas;
}