I'm trying to write a web-based emulator for an old-school computer that has memory mapped graphics. Right now I'm just using JavaScript and a basic HTML canvas to try to implement this, but the performance isn't there to make this a good solution.

What I basically want to do is have a large array of 8-bit values that represents the entire RAM of the machine I'm emulating, where a portion of that space is designated as the video memory. As the CPU is running and possibly modifying that video memory, the graphics/display hardware would poll that same area and present the information (bit by bit) onto the screen, perhaps at 50 or 60 times a second.

This particular system has a monochrome display, so the data in the video memory would represent each pixel using just 1 bit (so each byte in memory represents 8 pixels on screen, on or off).

My first attempt (really just as a test) was just a brute-force implementation using the canvas's drawing context (ctx in the code below) and calling putImageData on a per-pixel basis. But even if we ignore the overhead of analyzing the 8-bit information in the memory space, and just write a basic for-loop to turn on every pixel on the display, the performance of doing this using this method is too slow for anything close to a 50 Hz display loop:

let row;
let col;
function draw() {
    for(row = 0; row < 256; row++) {
        for(col = 0; col < 512; col++) {
            canvas_context.putImageData(pixel_on, row, col);
        }
    }
}

I'm really just looking for a high-level understanding on what is the best approach to take on implementing memory-mapped graphics data using JavaScript. There are libraries such as Phaser which may offer a better method, but perhaps there's a good way with plain vanilla JavaScript?