Make a Text Based FPS in JavaScript

Question

When I made the game in C++, the window and buffer size was 120 x 40 and the screen (array of wchar_t) was the same hence each character would take up equal space such that the whole array would make the screen and later redrawing it on the console

I am trying to make the basic console to work with the canvas but not every character has equal amount of space and not all would fit into it

//Display map
    for (nx = 0; nx < MAP_WIDTH; nx++)
    {
        for (ny = 0; ny < MAP_HEIGHT; ny++)
        {
            Screen[(ny + 1) * SCREEN_WIDTH + nx] = MAP[ny * MAP_WIDTH + nx] //returns a character '#' or '.';
        }
    }

this is the sample of how I fill the array

Screen = Array(SCREEN_WIDTH * SCREEEN_HEIGHT);

This is the initialization of array now how would I draw that screen buffer to the canvas in C++ it would be like this

//finally printing the screen
screen[ScreenWidth * ScreenHeight - 1] = '\0';
WriteConsoleOutputCharacter(hConsole, screen, ScreenWidth * ScreenHeight, { 0, 0 }, &dwBytesWritten);

Answer 1

I just ditched the canvas and just printed my text inside a para tag with such

let line = "";
    for (let y = 0; y < SCREEN_HEIGHT; y++) 
    {
        for (let x = 0; x < SCREEN_WIDTH; x++)
        {
            line += screen[y * SCREEN_WIDTH + x];
        }
        line += "\n";
    }

    document.getElementById("consoletext").innerText = line;