YouTube Stats For Nerds Volume Normalization Tool

function processImage(originalImg, volumeText = "100% / 100% (-19.0/-14.0dB) Opus (-26.0dB/-14.0dB) Ac3", codecsText = "vp09.00.51.08.01.01.01.01.00 (399) / opus (251)") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Use natural dimensions if available, otherwise fallback to element dimensions
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

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

    // YouTube Stats for nerds typical parameters
    const stats = [
        { label: "Video ID / sCPN", value: "dQw4w9WgXcQ / " + Math.random().toString(36).substring(2, 14).toUpperCase() },
        { label: "Viewport / Frames", value: `${width}x${height} / 0 dropped` },
        { label: "Current / Optimal Res", value: `${width}x${height}@60 / ${width}x${height}@60` },
        { label: "Volume / Normalized", value: volumeText },
        { label: "Codecs", value: codecsText },
        { label: "Color", value: "bt709 / bt709" },
        { label: "Host", value: "r1---sn-p5qlsnd6" },
        { label: "Connection Speed", value: "48500 Kbps" },
        { label: "Network Activity", value: "0 KB" },
        { label: "Buffer Health", value: "115.3 s" },
        { label: "Mystery Text", value: "vd:m, s:t, e:10" }
    ];

    // Dynamically calculate font size so it's readable regardless of image resolution
    const fontSize = Math.max(12, Math.round(height * 0.015));
    ctx.font = `${fontSize}px "Roboto", "Arial", sans-serif`;
    const lineSpacing = Math.round(fontSize * 1.6);

    // Measure text to dynamically calculate the overlay box dimensions
    const labelWidths = stats.map(s => ctx.measureText(s.label).width);
    const maxLabelWidth = Math.max(...labelWidths);
    // Gap between label and value columns
    const valueOffsetX = maxLabelWidth + fontSize * 1.5;

    const valueWidths = stats.map(s => ctx.measureText(s.value).width);
    const maxValueWidth = Math.max(...valueWidths);

    const padding = fontSize * 1.2;
    const boxWidth = padding + valueOffsetX + maxValueWidth + padding;
    const boxHeight = padding + (stats.length * lineSpacing) + padding;

    // Position of the top-left stats for nerds box (adding an initial offset from the image edge)
    const margin = fontSize;
    const startX = margin;
    const startY = margin;

    // Draw Semi-transparent black background box
    ctx.fillStyle = 'rgba(0, 0, 0, 0.65)';
    ctx.fillRect(startX, startY, boxWidth, boxHeight);

    // Draw Close Button '×' at top right of the box
    ctx.fillStyle = '#ffffff';
    ctx.font = `bold ${fontSize + 4}px sans-serif`;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('×', startX + boxWidth - (padding / 1.5), startY + (padding / 2));

    // Prepare to draw stats text
    ctx.font = `${fontSize}px "Roboto", "Arial", sans-serif`;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    
    let currentY = startY + padding + (lineSpacing / 2);

    // Draw each stat line
    stats.forEach(stat => {
        // Label in light gray
        ctx.fillStyle = '#cccccc';
        ctx.fillText(stat.label, startX + padding, currentY);

        // Value in white
        ctx.fillStyle = '#ffffff';
        ctx.fillText(stat.value, startX + padding + valueOffsetX, currentY);

        currentY += lineSpacing;
    });

    return canvas;
}