Image Aspect Ratio Calculator By Numbers

function processImage(originalImg, canvasWidth = 650, canvasHeight = 350, bgColor = '#1e1e1e', textColor = '#ffffff', accentColor = '#4caf50') {
    // Determine the actual dimensions of the provided image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    const cWidth = Number(canvasWidth) || 650;
    const cHeight = Number(canvasHeight) || 350;

    // Helper function to find the Greatest Common Divisor (GCD) mathematically
    function gcd(a, b) {
        return b === 0 ? a : gcd(b, a % b);
    }

    const canvas = document.createElement('canvas');
    canvas.width = cWidth;
    canvas.height = cHeight;
    const ctx = canvas.getContext('2d');

    // Handle invalid images cleanly
    if (!width || !height) {
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, cWidth, cHeight);
        ctx.fillStyle = '#f44336';
        ctx.font = 'bold 18px sans-serif';
        ctx.fillText("Error: Invalid image dimensions.", 40, 50);
        return canvas;
    }

    // Mathematical Aspect Ratio values
    const divisor = gcd(width, height);
    const ratioW = width / divisor;
    const ratioH = height / divisor;
    const decimalRatio = (width / height).toFixed(4);

    // Some common standard ratios to approximate against if the strict math ratio is weird
    const standardRatios = [
        { w: 1, h: 1 }, { w: 4, h: 3 }, { w: 3, h: 4 },
        { w: 16, h: 9 }, { w: 9, h: 16 }, { w: 16, h: 10 }, { w: 10, h: 16 },
        { w: 21, h: 9 }, { w: 3, h: 2 }, { w: 2, h: 3 },
        { w: 5, h: 4 }, { w: 4, h: 5 }, { w: 1.85, h: 1 }, { w: 2.35, h: 1 }
    ];

    let closestRatio = null;
    let minDiff = Infinity;
    const imgRatioVal = width / height;

    for (let r of standardRatios) {
        let rVal = r.w / r.h;
        let diff = Math.abs(rVal - imgRatioVal);
        if (diff < minDiff) {
            minDiff = diff;
            closestRatio = r;
        }
    }

    // Render Canvas Background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Start rendering text and data
    ctx.textBaseline = 'top';

    // Title
    ctx.fillStyle = accentColor;
    ctx.font = 'bold 24px sans-serif';
    ctx.fillText('Aspect Ratio Calculator', 40, 40);

    ctx.fillStyle = textColor;
    
    // Original Dimensions
    ctx.font = '16px sans-serif';
    ctx.fillText(`Dimensions:  ${width}px W × ${height}px H`, 40, 100);

    // Exact Ratio Value by Numbers
    ctx.font = '16px sans-serif';
    ctx.fillText('Exact Mathematical Ratio:', 40, 140);
    ctx.font = 'bold 36px sans-serif';
    ctx.fillText(`${ratioW} : ${ratioH}`, 40, 165);

    // Decimal Number Value
    ctx.font = '16px sans-serif';
    ctx.fillText(`Decimal Equivalent:  ${decimalRatio}`, 40, 230);

    // Show closely matching standard ratios if applicable (tolerant to ~2% variance)
    const tolerance = 0.05; 
    if (minDiff <= tolerance) {
        if (minDiff > 0.001) {
            ctx.fillText(`Closest Standard Ratio:  ~${closestRatio.w}:${closestRatio.h}`, 40, 265);
        } else if (closestRatio.w !== ratioW || closestRatio.h !== ratioH) {
            ctx.fillText(`Matches Standard Ratio:  ${closestRatio.w}:${closestRatio.h}`, 40, 265);
        }
    }

    // Right-side Diagram/Visualization
    const maxBoxW = canvas.width / 2.5; // Reserve max half of canvas
    const maxBoxH = canvas.height - 120; // Margin top and bottom
    const scale = Math.min(maxBoxW / width, maxBoxH / height);
    const boxW = width * scale;
    const boxH = height * scale;
    
    // Align visual box to the right side, strictly centered vertically
    const boxX = canvas.width - boxW - 80;
    const boxY = (canvas.height - boxH) / 2;

    // Faintly draw original image in the background of the box
    ctx.globalAlpha = 0.35;
    ctx.drawImage(originalImg, boxX, boxY, boxW, boxH);
    ctx.globalAlpha = 1.0;

    // Draw visual outline representing the aspect ratio proportion
    ctx.strokeStyle = accentColor;
    ctx.lineWidth = 4;
    ctx.strokeRect(boxX, boxY, boxW, boxH);

    // Label the width ratio above the visual box
    ctx.fillStyle = accentColor;
    ctx.font = 'bold 18px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(ratioW.toString(), boxX + boxW / 2, boxY - 28);
    
    // Label the height ratio beside the visual box
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText(ratioH.toString(), boxX + boxW + 15, boxY + boxH / 2);

    return canvas;
}