News Broadcast Overlay Image Generator

function processImage(
    originalImg, 
    headline = "В ЭФИРЕ НОВОСТИ", 
    ticker = "ГЛАВНЫЕ СОБЫТИЯ ДНЯ • ПРЯМОЕ ВКЛЮЧЕНИЕ • ПОДРОБНОСТИ СМОТРИТЕ НА НАШЕМ КАНАЛЕ", 
    liveText = "ПРЯМОЙ ЭФИР", 
    timeText = "19:00", 
    themeColor = "#d32f2f"
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image as background
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    const w = canvas.width;
    const h = canvas.height;
    
    // Calculate proportions for the layout based on image size
    const tickerHeight = h * 0.08;
    const bannerHeight = h * 0.12;
    const bannerY = h - tickerHeight - bannerHeight;
    const tickerY = h - tickerHeight;
    
    // 1. Draw Headline Banner (Background)
    ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
    ctx.fillRect(0, bannerY, w, bannerHeight);
    
    // 2. Draw Ticker (Background)
    ctx.fillStyle = "rgba(20, 20, 20, 0.9)";
    ctx.fillRect(0, tickerY, w, tickerHeight);
    
    // 3. Draw Category Box ("НОВОСТИ") on the left of the Headline Banner
    const categoryWidth = w * 0.25;
    ctx.fillStyle = themeColor;
    ctx.fillRect(0, bannerY, categoryWidth, bannerHeight);
    
    // Add subtle shadow for depth
    ctx.shadowColor = "rgba(0,0,0,0.3)";
    ctx.shadowBlur = 4;
    ctx.shadowOffsetY = 2;
    // Redraw filled rect to apply shadow locally, then reset
    ctx.fillRect(0, bannerY, categoryWidth, bannerHeight);
    ctx.shadowColor = "transparent"; // Reset shadow
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;
    
    // Draw Category Text
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    let fontSize = bannerHeight * 0.45;
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    ctx.fillText("НОВОСТИ", categoryWidth / 2, bannerY + bannerHeight / 2, categoryWidth * 0.9);
    
    // 4. Draw Headline Text
    ctx.fillStyle = "#000000";
    ctx.textAlign = "left";
    fontSize = bannerHeight * 0.45;
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    const headlineX = categoryWidth + (w * 0.02);
    const maxHeadlineWidth = w - headlineX - (w * 0.02);
    ctx.fillText(headline, headlineX, bannerY + bannerHeight / 2, maxHeadlineWidth);
    
    // 5. Draw Ticker Text
    ctx.fillStyle = "#ffffff";
    fontSize = tickerHeight * 0.55;
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    ctx.fillText(ticker, w * 0.02, tickerY + tickerHeight / 2, w * 0.96);
    
    // 6. Draw LIVE Indicator (Top Left)
    const liveW = w * 0.20;
    const liveH = h * 0.08;
    const liveX = w * 0.05;
    const liveY = h * 0.05;
    
    ctx.fillStyle = themeColor;
    ctx.fillRect(liveX, liveY, liveW, liveH);
    
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    fontSize = liveH * 0.45;
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    ctx.fillText("● " + liveText, liveX + liveW / 2, liveY + liveH / 2, liveW * 0.9);
    
    // 7. Draw Time Indicator (Top Right)
    const timeW = w * 0.12;
    const timeX = w - w * 0.05 - timeW;
    ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
    ctx.fillRect(timeX, liveY, timeW, liveH);
    
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    ctx.fillText(timeText, timeX + timeW / 2, liveY + liveH / 2, timeW * 0.9);
    
    // 8. Draw Fake TV Channel Logo (Below Time)
    const logoY = liveY + liveH + h * 0.02;
    const logoRadius = Math.min(timeW / 2.5, h * 0.06);
    
    ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
    ctx.beginPath();
    ctx.arc(timeX + timeW / 2, logoY + logoRadius, logoRadius, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.fillStyle = themeColor;
    ctx.font = `900 ${logoRadius * 0.8}px Arial, sans-serif`;
    ctx.fillText("TV", timeX + timeW / 2, logoY + logoRadius);
    
    return canvas;
}