Emu48 Javascript ?

[TheKaneB]

That's the easy part.
The emulator engine should have some sort of framebuffer for the display, which usually is just a byte array in the form of:

int displayHeight = 160; // or whatever
int displayWidth = 120;
uint8 * frameBuffer = (uint8 *)malloc(sizeof(uint8) * displayHeight * displayWidth);

The emulator will set / clear a pixel with code like this:

void setPixel(int x, int y, uint8 value) {
frameBuffer[x + y*frameBufferWidth] = value;
}

When the rendering is completed, the C code should call some kind of callback function telling the UI code that it's time to refresh the display, and it will pass the frameBuffer object.

That's the right time to handle the object over to the canvas routine. You will just copy the pixels and apply the necessary scale and filter.

Please note that after the engine will be converted from C to JS using EmScripten, the framebuffer object will be converted to a similar javascript array in the form:

frameBuffer = [1, 0, 0, 1, 1, 1, 0, 0, ....]; // we just have monochrome pixels here

so the glue code to render it into canvas will be very short:

var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),

// Get a pointer to the current location in the image.
var palette = ctx.getImageData(0,0,160,120); //x,y,w,h
// Wrap your array as a Uint8ClampedArray
palette.data.set(new Uint8ClampedArray(frameBuffer));
// Repost the data.
ctx.putImageData(palette,0,0);

Actually, you might want to scale the pixel values from 1 to 255 and invert their values (ie: a clear pixel will have value 0, but 0 is usually associated with black and you want white instead).
Anyway, that's just little details that you can figure out once you know exactly the data format of the framebuffer.