<!DOCTYPE html>
<title>C3 WASM</title>
<style>
body { background: #111; margin: 0; display: grid; height: 100vh; place-items: center; }
canvas { background: #000; border: 2px solid #333; }
</style>
<canvas id="c" width="800" height="600"></canvas>
<script>
const ctx = c.getContext('2d');
let view, img, shared = false, ptr = 0;
var Module = {
onRuntimeInitialized: () => {
ptr = Module._get_framebuffer();
shared = Module.HEAPU8.buffer instanceof SharedArrayBuffer;
if (shared) {
view = new Uint8ClampedArray(800 * 600 * 4);
img = new ImageData(view, 800, 600);
} else {
view = new Uint8ClampedArray(Module.HEAPU8.buffer, ptr, 800 * 600 * 4);
img = new ImageData(view, 800, 600);
}
loop();
}
};
function loop() {
Module._update_and_render();
if (shared) {
view.set(Module.HEAPU8.subarray(ptr, ptr + (800 * 600 * 4)));
}
ctx.putImageData(img, 0, 0);
requestAnimationFrame(loop);
}
</script>
<script src="build/index.js"></script>