Image To Dinosaur Version Converter

function processImage(originalImg, dinoSizeOpt = 16, backgroundColor = "#121212") {
    // Parse parameters
    let dinoSize = parseInt(dinoSizeOpt, 10);
    if (isNaN(dinoSize) || dinoSize < 4) {
        dinoSize = 16;
    }

    // Calculate dimensions dividing image into a grid
    const cols = Math.max(1, Math.floor(originalImg.width / dinoSize));
    const rows = Math.max(1, Math.floor(originalImg.height / dinoSize));
    const finalWidth = cols * dinoSize;
    const finalHeight = rows * dinoSize;

    // Create a downscaled canvas to sample average colors for each grid block
    const smallCanvas = document.createElement("canvas");
    smallCanvas.width = cols;
    smallCanvas.height = rows;
    const smallCtx = smallCanvas.getContext("2d", { willReadFrequently: true });
    smallCtx.drawImage(originalImg, 0, 0, cols, rows);
    const imgData = smallCtx.getImageData(0, 0, cols, rows).data;

    // Create a mosaic canvas to hold the solid colors before applying the mask
    const mosaicCanvas = document.createElement("canvas");
    mosaicCanvas.width = finalWidth;
    mosaicCanvas.height = finalHeight;
    const mCtx = mosaicCanvas.getContext("2d");

    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            const i = (y * cols + x) * 4;
            const r = imgData[i];
            const g = imgData[i + 1];
            const b = imgData[i + 2];
            const a = imgData[i + 3] / 255;
            
            mCtx.fillStyle = `rgba(${r},${g},${b},${a})`;
            mCtx.fillRect(x * dinoSize, y * dinoSize, dinoSize, dinoSize);
        }
    }

    // Create a single 16x16 pixel-art dinosaur pattern
    const dinoPatternCanvas = document.createElement("canvas");
    dinoPatternCanvas.width = dinoSize;
    dinoPatternCanvas.height = dinoSize;
    const pCtx = dinoPatternCanvas.getContext("2d");
    pCtx.fillStyle = "#ffffff";

    // 8-bit aesthetic T-Rex silhouette map
    const dinoBitmap = [
        "0000000011111110",
        "0000000010111110",
        "0000000011111111",
        "0000000011100000",
        "0000000011111110",
        "0000000111110000",
        "0000001111110000",
        "0000011111111100",
        "0100011111111000",
        "0110011111110000",
        "0111111111100000",
        "0011111111100000",
        "0001111111000000",
        "0000111001000000",
        "0000110001100000",
        "0000010001100000"
    ];

    const pxW = dinoSize / 16;
    const pxH = dinoSize / 16;

    // Draw the dinosaur shape into its repeating tile
    for (let y = 0; y < 16; y++) {
        for (let x = 0; x < 16; x++) {
            if (dinoBitmap[y][x] === "1") {
                // Expanding the fractional coordinates slightly to avoid thin transparent seams caused by anti-aliasing
                pCtx.fillRect(
                    Math.floor(x * pxW),
                    Math.floor(y * pxH),
                    Math.ceil(pxW) + 0.5,
                    Math.ceil(pxH) + 0.5
                );
            }
        }
    }

    // Create full mask populated completely by the repeating dinosaur shape
    const maskCanvas = document.createElement("canvas");
    maskCanvas.width = finalWidth;
    maskCanvas.height = finalHeight;
    const maskCtx = maskCanvas.getContext("2d");
    const pattern = maskCtx.createPattern(dinoPatternCanvas, "repeat");
    
    maskCtx.fillStyle = pattern;
    maskCtx.fillRect(0, 0, finalWidth, finalHeight);

    // Composite: Use 'destination-in' so the colored mosaic only exists where the white dinosaur mask overlaps it
    mCtx.globalCompositeOperation = "destination-in";
    mCtx.drawImage(maskCanvas, 0, 0);

    // Draw final output composed with the specified background color behind the colored dinosaurs
    const finalCanvas = document.createElement("canvas");
    finalCanvas.width = finalWidth;
    finalCanvas.height = finalHeight;
    const fCtx = finalCanvas.getContext("2d");

    if (backgroundColor && backgroundColor.toLowerCase() !== "transparent") {
        fCtx.fillStyle = backgroundColor;
        fCtx.fillRect(0, 0, finalWidth, finalHeight);
    }

    fCtx.drawImage(mosaicCanvas, 0, 0);

    return finalCanvas;
}