Image To Konekts TV Branding Tool

function processImage(originalImg, brandName = "KONEKTS TV", headlineText = "ТЕЛЕКАНАЛУ КОНЕЦ", addTVEffects = 1) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

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

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

    // 2. Add retro TV scanlines and vignette effect if enabled
    if (Number(addTVEffects) === 1) {
        // Draw Vignette
        const gradient = ctx.createRadialGradient(width / 2, height / 2, height * 0.4, width / 2, height / 2, height);
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        gradient.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);

        // Draw Scanlines
        ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
        for (let y = 0; y < height; y += 4) {
            ctx.fillRect(0, y, width, 2);
        }
    }

    // 3. Draw Watermarks & Corner Overlays
    const pad = Math.max(10, width * 0.04);
    const fontSizeTop = Math.max(16, width * 0.04);
    ctx.font = `bold ${fontSizeTop}px Impact, sans-serif`;
    ctx.textBaseline = "middle";

    // Top Left: Red Dot + "LIVE" text
    ctx.beginPath();
    ctx.arc(pad + fontSizeTop / 2, pad + fontSizeTop / 2, fontSizeTop / 3, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.textAlign = "left";
    ctx.shadowColor = "black";
    ctx.shadowBlur = 4;
    ctx.fillText("ПРЯМОЙ ЭФИР", pad + fontSizeTop * 1.2, pad + fontSizeTop / 2);

    // Top Right: Konekts TV Channel Brand Name
    ctx.textAlign = "right";
    ctx.fillStyle = "white";
    ctx.fillText(brandName, width - pad, pad + fontSizeTop / 2);
    ctx.shadowBlur = 0; // reset shadow

    // 4. Draw Lower Third Graphic (News banner style)
    const ltHeight = Math.max(50, height * 0.15);
    const ltWidth = width * 0.85;
    const ltX = pad;
    const ltY = height - ltHeight - pad;

    // Main lower third banner background (Blue)
    ctx.fillStyle = "rgba(0, 50, 150, 0.85)";
    ctx.fillRect(ltX, ltY, ltWidth, ltHeight);

    // Bottom Accent line (Red)
    const accentHeight = Math.max(4, ltHeight * 0.08);
    ctx.fillStyle = "rgba(220, 20, 20, 0.9)";
    ctx.fillRect(ltX, ltY + ltHeight - accentHeight, ltWidth, accentHeight);

    // Top secondary sub-box background (White)
    const subBoxHeight = ltHeight * 0.35;
    ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
    ctx.fillRect(ltX, ltY - subBoxHeight, width * 0.25, subBoxHeight);

    // Sub-box text ("НОВОСТИ" - NEWS)
    ctx.fillStyle = "black";
    ctx.textAlign = "left";
    const tagSize = Math.max(10, subBoxHeight * 0.6);
    ctx.font = `bold ${tagSize}px Arial, sans-serif`;
    ctx.fillText("НОВОСТИ", ltX + 10, ltY - subBoxHeight / 2);

    // 5. Draw Headline Text ("Телеканалу Конец")
    let hlSize = Math.max(16, ltHeight * 0.5);
    ctx.fillStyle = "white";
    ctx.font = `bold ${hlSize}px Arial, sans-serif`;

    // Responsive scaling loop if text exceeds the banner width
    let textWidth = ctx.measureText(headlineText).width;
    while (textWidth > ltWidth - 20 && hlSize > 10) {
        hlSize--;
        ctx.font = `bold ${hlSize}px Arial, sans-serif`;
        textWidth = ctx.measureText(headlineText).width;
    }

    // Offset slightly higher so bottom red accent line doesn't cover text
    ctx.fillText(headlineText, ltX + 10, ltY + (ltHeight - accentHeight) / 2);

    return canvas;
}