Image Alphabetical Order Visualizer

function processImage(originalImg, gridSize = 10, alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", bgColor = "#FFFFFF") {
    // Validate and parse parameters
    gridSize = parseInt(gridSize, 10);
    if (isNaN(gridSize) || gridSize < 2) {
        gridSize = 10;
    }
    if (typeof alphabet !== "string" || alphabet.length === 0) {
        alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    }
    if (typeof bgColor !== "string") {
        bgColor = "#FFFFFF";
    }

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

    // Create a temporary canvas to extract pixel data
    const tempCanvas = document.createElement("canvas");
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext("2d", { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0, width, height);
    const imgData = tempCtx.getImageData(0, 0, width, height).data;

    // Create the output canvas
    const outCanvas = document.createElement("canvas");
    outCanvas.width = width;
    outCanvas.height = height;
    const outCtx = outCanvas.getContext("2d");

    // Fill the background
    outCtx.fillStyle = bgColor;
    outCtx.fillRect(0, 0, width, height);

    // Set text properties
    // Multiply grid size slightly to make the letters fill the slots nicely
    const fontSize = Math.max(1, Math.floor(gridSize * 1.1));
    outCtx.font = `bold ${fontSize}px monospace`;
    outCtx.textAlign = "center";
    outCtx.textBaseline = "middle";

    let charIndex = 0;

    // Iterate through the image pixels in grid steps
    for (let y = 0; y < height; y += gridSize) {
        for (let x = 0; x < width; x += gridSize) {
            let r = 0, g = 0, b = 0, a = 0, count = 0;
            const maxPx = Math.min(x + gridSize, width);
            const maxPy = Math.min(y + gridSize, height);

            // Average the pixel colors inside the current grid cell
            for (let py = y; py < maxPy; py++) {
                for (let px = x; px < maxPx; px++) {
                    const idx = (py * width + px) * 4;
                    r += imgData[idx];
                    g += imgData[idx + 1];
                    b += imgData[idx + 2];
                    a += imgData[idx + 3];
                    count++;
                }
            }

            r = Math.round(r / count);
            g = Math.round(g / count);
            b = Math.round(b / count);
            a = Math.round(a / count);

            // Draw the next alphabetical character using the cell's average color
            if (a > 0) {
                const char = alphabet[charIndex % alphabet.length];
                outCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
                
                const centerX = x + gridSize / 2;
                const centerY = y + gridSize / 2;
                
                outCtx.fillText(char, centerX, centerY);
            }
            
            // Advance through the sorted alphabet regardless of transparency 
            // to keep the visual "pattern" of the language intact over the grid
            charIndex++;
        }
    }

    return outCanvas;
}