Secret Life Of Bertie Image Tool

function processImage(originalImg, titleLine1 = "ТАЙНАЯ ЖИЗНЬ", titleLine2 = "БЕРТИ", subtitle = "🐾 СКОРО В КИНО 🐾") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Cast text parameters to string and uppercase to emulate a movie poster style
    const t1 = String(titleLine1).toUpperCase();
    const t2 = String(titleLine2).toUpperCase();
    const sub = String(subtitle).toUpperCase();

    // Scale down image if it's too large to prevent performance issues
    let width = originalImg.width;
    let height = originalImg.height;
    const MAX_SIZE = 1500;
    
    if (width > MAX_SIZE || height > MAX_SIZE) {
        const ratio = Math.min(MAX_SIZE / width, MAX_SIZE / height);
        width *= ratio;
        height *= ratio;
    }

    canvas.width = width;
    canvas.height = height;

    // Apply a cinematic filter (increase saturation and contrast for an animated movie look)
    ctx.filter = 'contrast(1.15) saturate(1.4)';
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none'; // Reset filter so it doesn't affect the drawn text

    // Draw a dark gradient at the bottom to ensure text readability against any background
    const grad = ctx.createLinearGradient(0, height * 0.4, 0, height);
    grad.addColorStop(0, 'rgba(0,0,0,0)');
    grad.addColorStop(0.6, 'rgba(0,0,0,0.5)');
    grad.addColorStop(1, 'rgba(0,0,0,0.9)');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, width, height);

    // Calculate responsive design sizes based on the image canvas dimensions
    const scaleBase = Math.min(width, height);
    const fontSize1 = scaleBase * 0.08;
    const fontSize2 = scaleBase * 0.16;
    const fontSize3 = scaleBase * 0.04;
    const margin = scaleBase * 0.06;

    // Y-coordinate placements for bottom-anchored text
    const ySub = height - margin;
    const yLine2 = ySub - fontSize3 - margin * 0.4;
    const yLine1 = yLine2 - fontSize2;

    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    // 1. Draw Title Line 1 (ТАЙНАЯ ЖИЗНЬ)
    ctx.shadowColor = 'rgba(0,0,0,0.7)';
    ctx.shadowBlur = scaleBase * 0.02;
    ctx.shadowOffsetX = scaleBase * 0.005;
    ctx.shadowOffsetY = scaleBase * 0.005;
    ctx.font = `bold ${fontSize1}px "Arial Black", Impact, sans-serif`;
    ctx.fillStyle = 'white';
    ctx.fillText(t1, width / 2, yLine1);

    // 2. Draw Title Line 2 (БЕРТИ)
    ctx.font = `bold ${fontSize2}px "Arial Black", Impact, sans-serif`;
    ctx.fillStyle = '#ffcc00'; // Bright cinematic yellow
    ctx.fillText(t2, width / 2, yLine2);

    // Add a stroke to Title Line 2 to make it pop out
    ctx.shadowColor = 'transparent';
    ctx.lineWidth = scaleBase * 0.006;
    ctx.strokeStyle = 'black';
    ctx.strokeText(t2, width / 2, yLine2);

    // 3. Draw Subtitle (🐾 СКОРО В КИНО 🐾)
    ctx.shadowColor = 'rgba(0,0,0,0.8)';
    ctx.shadowBlur = scaleBase * 0.01;
    ctx.shadowOffsetX = scaleBase * 0.002;
    ctx.shadowOffsetY = scaleBase * 0.002;
    ctx.font = `bold ${fontSize3}px "Arial", sans-serif`;
    ctx.fillStyle = '#f0f0f0';
    ctx.fillText(sub, width / 2, ySub);

    return canvas;
}