YouTube Video Image And Stats For Nerds Viewer

function processImage(
    originalImg,
    videoId = "dQw4w9WgXcQ / 4A2C-9GH",
    viewport = "1920x1080*1.00",
    resolution = "1920x1080@60 / 1920x1080@60",
    codecs = "av01.0.08M.08 (399) / opus (251)",
    connectionSpeed = "48500 Kbps",
    networkActivity = "0 KB",
    bufferHealth = "115.5 s",
    droppedFrames = "0 / 2341"
) {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

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

    // YouTube Stats for nerds data
    const stats = [
        { label: "Video ID / sCPN", value: String(videoId) },
        { label: "Viewport / Frames", value: String(viewport) },
        { label: "Current / Optimal Res", value: String(resolution) },
        { label: "Volume / Normalized", value: "100% / 100% (content loudness 0.0dB)" },
        { label: "Codecs", value: String(codecs) },
        { label: "Color", value: "bt709 / bt709" },
        { label: "Connection Speed", value: String(connectionSpeed) },
        { label: "Network Activity", value: String(networkActivity) },
        { label: "Buffer Health", value: String(bufferHealth) },
        { label: "Mystery Text", value: "s:4 t:173.23 b:0.000-115.534 P" },
        { label: "Dropped Frames", value: String(droppedFrames) }
    ];

    ctx.save();
    
    // Scale for small images to ensure overlay fits properly within bounds
    const boxWidth = 380;
    const boxHeight = 250;
    const scale = Math.min(1, Math.max(0.3, (originalImg.width - 20) / boxWidth, (originalImg.height - 20) / boxHeight));
    ctx.scale(scale, scale);

    // Overlay positioning
    const startX = 10;
    const startY = 10;
    
    // Draw the semi-transparent black background box typical of Stats for Nerds
    ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
    ctx.beginPath();
    // Using standard paths for rounded corners to ensure broad browser compatibility
    const radius = 4;
    ctx.moveTo(startX + radius, startY);
    ctx.lineTo(startX + boxWidth - radius, startY);
    ctx.quadraticCurveTo(startX + boxWidth, startY, startX + boxWidth, startY + radius);
    ctx.lineTo(startX + boxWidth, startY + boxHeight - radius);
    ctx.quadraticCurveTo(startX + boxWidth, startY + boxHeight, startX + boxWidth - radius, startY + boxHeight);
    ctx.lineTo(startX + radius, startY + boxHeight);
    ctx.quadraticCurveTo(startX, startY + boxHeight, startX, startY + boxHeight - radius);
    ctx.lineTo(startX, startY + radius);
    ctx.quadraticCurveTo(startX, startY, startX + radius, startY);
    ctx.closePath();
    ctx.fill();

    // Draw Close (X) button
    ctx.fillStyle = "#ffffff";
    ctx.font = "bold 14px Arial, sans-serif";
    ctx.textAlign = "right";
    ctx.fillText("✕", startX + boxWidth - 15, startY + 23);

    // Draw Stats Text
    ctx.textAlign = "left";
    const labelX = startX + 15;
    const valueX = startX + 160;
    let currentY = startY + 32;

    for (const stat of stats) {
        ctx.font = "12px 'Roboto', Arial, sans-serif";
        
        // Draw the Label in grey
        ctx.fillStyle = "#aaaaaa";
        ctx.fillText(stat.label, labelX, currentY);
        
        // Draw the Value in white
        ctx.fillStyle = "#ffffff";
        ctx.fillText(stat.value, valueX, currentY);

        currentY += 19;
    }

    ctx.restore();

    return canvas;
}