Image Generator For Nespyashchie V Prostokvashino

function processImage(originalImg, mainText = "Неспящие в Простоквашино", subtitleText = "Скоро во всех кинотеатрах", nightIntensity = "0.4") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

    // Parse the intensity
    const intensity = Math.min(Math.max(Number(nightIntensity) || 0, 0), 1);

    // Apply a "Sleepless" night/cinematic filter (a cool blue/dark tint)
    if (intensity > 0) {
        // Uniform dark-blue tint
        ctx.fillStyle = `rgba(15, 25, 50, ${intensity})`;
        ctx.fillRect(0, 0, width, height);
        
        // Add a vignette effect for a cinematic feel
        const gradient = ctx.createRadialGradient(
            width / 2, height / 2, Math.min(width, height) * 0.1, 
            width / 2, height / 2, Math.max(width, height) * 0.8
        );
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(1, `rgba(0, 0, 0, ${intensity + 0.3})`);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

    // Configure text rendering
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Add Main Title Text
    const mainFontSize = Math.max(24, Math.floor(width * 0.08));
    ctx.font = `bold ${mainFontSize}px "Trebuchet MS", "Impact", sans-serif`;
    ctx.lineWidth = Math.max(2, mainFontSize * 0.04);
    
    const mainY = height * 0.8;
    
    // Text shadows for depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 4;
    ctx.shadowOffsetY = 4;
    
    // Main text fill and stroke
    ctx.fillStyle = '#ffffff';
    ctx.strokeStyle = '#000000';
    
    // Squeeze the text horizontally if it exceeds 90% of image width
    const maxMainWidth = width * 0.9;
    ctx.strokeText(mainText, width / 2, mainY, maxMainWidth);
    ctx.fillText(mainText, width / 2, mainY, maxMainWidth);
    
    // Add Subtitle Text
    ctx.shadowBlur = 8;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    
    const subFontSize = Math.max(16, Math.floor(width * 0.04));
    ctx.font = `italic ${subFontSize}px "Trebuchet MS", "Arial", sans-serif`;
    ctx.lineWidth = Math.max(1, subFontSize * 0.04);
    
    const subY = height * 0.92;
    const maxSubWidth = width * 0.8;
    
    // Subtitle fill and stroke
    ctx.fillStyle = '#ffcc00'; // Golden yellow subtitle
    ctx.strokeText(subtitleText, width / 2, subY, maxSubWidth);
    ctx.fillText(subtitleText, width / 2, subY, maxSubWidth);

    return canvas;
}