YouTube Stats For Nerds Volume Normalization Information Tool

function processImage(originalImg, volumeNorm = "100% / 329% (-19.0dB/-14.0dB)", codecsInfo = "vp09 (248) / Opus (-26.0dB/-14.0dB) Ac3") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Calculate a reasonable scaling factor so the stats box is readable 
    // on high-res images but doesn't overflow small images
    let scale = canvas.width / 1000;
    scale = Math.max(0.6, Math.min(scale, 2.5));
    
    // If the image is very small, scale down the box further so it fits
    if (500 * scale > canvas.width) {
        scale = canvas.width / 520;
    }

    const startX = 20 * scale;
    const startY = 20 * scale;
    const padding = 15 * scale;
    const lineHeight = 22 * scale;
    const fontSize = 13 * scale;
    const labelWidth = 170 * scale;
    const boxWidth = 480 * scale;

    const stats = [
        { label: "Video ID / sCPN", value: "aBcDeFgHiJk / XZY1 ABC2 DEF3" },
        { label: "Viewport / Frames", value: `${canvas.width}x${canvas.height} / 0 dropped of 2440` },
        { label: "Current / Optimal Res", value: `${canvas.width}x${canvas.height}@60 / ${canvas.width}x${canvas.height}@60` },
        { label: "Volume / Normalized", value: volumeNorm },
        { label: "Codecs", value: codecsInfo },
        { label: "Color", value: "bt709 / aom" },
        { label: "Host", value: "r1---sn-axq7sn7e.googlevideo.com" },
        { label: "Connection Speed", value: "45120 Kbps" },
        { label: "Network Activity", value: "0 KB" },
        { label: "Buffer Health", value: "123.45 s" }
    ];

    const boxHeight = padding * 2 + lineHeight * (stats.length + 1);

    // Draw the semi-transparent dark YouTube-like panel
    ctx.fillStyle = 'rgba(28, 28, 28, 0.85)';
    ctx.fillRect(startX, startY, boxWidth, boxHeight);

    // Draw the top bar and title
    const fontStack = "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif";
    
    // Close button (X)
    ctx.fillStyle = '#ffffff';
    ctx.font = `${fontSize * 1.1}px ${fontStack}`;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('✕', startX + boxWidth - padding, startY + padding + (lineHeight / 2) - (4 * scale));

    // Panel Title
    ctx.font = `bold ${fontSize + 1}px ${fontStack}`;
    ctx.textAlign = 'left';
    ctx.fillText('Stats for nerds', startX + padding, startY + padding + (lineHeight / 2) - (4 * scale));
    
    // Draw the dividing line common in some iterations, or jump straight to lists.
    let currentY = startY + padding + lineHeight * 1.2;

    // Draw all standard row data
    ctx.font = `${fontSize}px ${fontStack}`;
    for (let i = 0; i < stats.length; i++) {
        // Label side (lighter gray)
        ctx.fillStyle = '#b0b0b0';
        ctx.fillText(stats[i].label, startX + padding, currentY);
        
        // Value side (white text)
        ctx.fillStyle = '#ffffff';
        ctx.fillText(stats[i].value, startX + padding + labelWidth, currentY);
        
        // Advance to next line
        currentY += lineHeight;
    }

    return canvas;
}