forked from maniyar1/wasm-canvas-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
61 lines (50 loc) · 1.6 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
async function main() {
const { instance } = await WebAssembly.instantiateStreaming(
fetch("./dist/graphics.wasm"), {}
);
const width = 600;
const height = 600;
// WASM implementation
const [canvas, ctx] = get_canvas("demo-canvas")
canvas.width = width;
canvas.height = height;
const image = init_draw_wasm(instance, width, height)
draw_wasm(instance, ctx, image)
// JS implementation using fillRect
const [canvas2, ctx2] = get_canvas("demo-canvas-2")
canvas2.width = width;
canvas2.height = height;
draw_js(ctx2, width, height)
}
function get_canvas(id) {
const canvas = document.getElementById(id);
const ctx = canvas.getContext("2d");
return [canvas, ctx]
}
// called only once
// ImageData is a live view to the underlying Uint8ClampedArray,
// and Uint8ClampedArray is a live view to the underlying ArrayBuffer,
// which is exported by the wasm as a memory instance.
function init_draw_wasm(instance, width, height) {
return new ImageData(
new Uint8ClampedArray(
instance.exports.memory.buffer, // wasm memory
instance.exports.ImageDataBuffer.value, // image data address
4 * width * height,
),
width,
)
}
// can be called for each frame
// the wasm changes the memory and then canvas needs to be updated
function draw_wasm(instance, ctx, image) {
instance.exports.draw(); // here
ctx.putImageData(image, 0, 0);
}
function draw_js(ctx2, width, height) {
ctx2.fillStyle = 'blue'
ctx2.fillRect(0, 0, width/2, height)
ctx2.fillStyle = 'red'
ctx2.fillRect(width/2, 0, width/2, height)
}
main().catch((err) => {throw err})