Movie Name Image Identifier Creator

function processImage(originalImg, movieName = "CINEMATIC TALE", creatorName = "JOHN DOE", identifier = "A FILM BY", showCinematicBars = "true", baseFontSize = "80") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

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

    let barHeight = 0;
    
    // Add cinematic letterboxing (2.35:1 aspect ratio) if toggled 
    if (showCinematicBars.toLowerCase() === "true") {
        const cinematicHeight = width / 2.35;
        barHeight = Math.max(0, (height - cinematicHeight) / 2);

        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, width, barHeight);
        ctx.fillRect(0, height - barHeight, width, barHeight);
    }

    // Add a darkening gradient at the bottom (above the bottom bar) to ensure text readability
    const gradHeight = Math.min(height * 0.4, 400);
    const gradient = ctx.createLinearGradient(0, height - barHeight - gradHeight, 0, height - barHeight);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(0.5, 'rgba(0,0,0,0.3)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.8)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, height - barHeight - gradHeight, width, gradHeight);

    // Setup text alignments and shadows
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillStyle = 'white';
    ctx.shadowColor = 'rgba(0,0,0,0.9)';
    ctx.shadowBlur = 8;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    // Determine font scaling relative to image size if the base size feels too small/large
    let parsedFontSize = parseInt(baseFontSize, 10);
    if (isNaN(parsedFontSize)) parsedFontSize = 80;
    
    // Scale font properly based on image dimensions
    const scaleFactor = width / 1200;
    const titleFontSize = parsedFontSize * scaleFactor;
    const subtitleFontSize = titleFontSize * 0.35;

    // Draw the Main Movie Name
    ctx.font = `bold ${titleFontSize}px "Times New Roman", Times, serif`;
    
    // Support for letterSpacing if available in the browser
    if ('letterSpacing' in ctx) {
        ctx.letterSpacing = `${titleFontSize * 0.15}px`;
    }
    
    const titleY = height - barHeight - (height * 0.05);
    ctx.fillText(movieName.toUpperCase(), width / 2, titleY);

    // Draw the Identifier and Creator Name (e.g., "A FILM BY JOHN DOE")
    const fullSubtitle = `${identifier} ${creatorName}`.trim();
    if (fullSubtitle !== "") {
        ctx.font = `normal ${subtitleFontSize}px "Arial", sans-serif`;
        
        if ('letterSpacing' in ctx) {
            ctx.letterSpacing = `${subtitleFontSize * 0.25}px`;
        }
        
        ctx.fillStyle = '#e0e0e0';
        const subtitleY = titleY - titleFontSize - (height * 0.015);
        ctx.fillText(fullSubtitle.toUpperCase(), width / 2, subtitleY);
    }

    return canvas;
}