JS + HTML: Snippet to create ASCII character table sprites

index.mjs

const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
const table = await (await fetch("/data/8859-1.txt")).text() // Copied from Wikipedia's table
const idxTable = []

let idx = 0
for(let row of table.split("\n")){
    for(let col of row.split("\t").slice(1)){
        let uniChar = String.fromCharCode(idx)
        if(uniChar != col)
            if(idx < 32 || (idx >= 127 && idx <= 159)) // Control characters C1 and C2. Render as "?"
                col = "?"
            else // Space-like characters
                col = " "
        idxTable[idx++] = col
    }
}

let CW = 9
let CH = 17

let W = canvas.width = 16*CW
let H = canvas.height = 16*CH

canvas.style.imageRendering = "pixelated"
canvas.style.height = "100%"

const auxCanvas = document.createElement("canvas")
auxCanvas.width = CW
auxCanvas.height = CH
auxCanvas.style.imageRendering = "pixelated"
auxCanvas.style.fontSmooth = "never"
auxCanvas.style.webkitFontSmoothing = "none"
const auxCtx = auxCanvas.getContext("2d")

auxCtx.font = `${CH-2}px monospace`
auxCtx.textAlign = "left"
auxCtx.textBaseline = "bottom"
auxCtx.imageSmoothingEnabled = false
ctx.clearRect(0, 0, W, H)
for(let i = 0; i < idxTable.length; i++){
    auxCtx.clearRect(0, 0, CW, CH)
    let ix = i%16
    let iy = i/16|0

    let x = ix*CW
    let y = iy*CH

    auxCtx.fillStyle = "#FFF"
    auxCtx.fillText(idxTable[i], 0, CH+2)
    ctx.drawImage(auxCanvas, x, y)
}