Modify canvas from wasm

Question

Is it possible to efficiently modify the html5 canvas from web assembly?

Update:

var imageData = context.getImageData(x, y, w, h)
var buffer = imageData         


        

Answer 1

No, not in this stage of WebAssembly and web-api development. With context.getImageData you get a new ImageData object with a new buffer which must be copied once again in the memory's buffer of your WebAssembly instance. But if you don't need to read from canvas, only to write, you can allocate the ImageData.data in the memory of your WebAssembly instance. Use ImageData constructor

imageData = new ImageData(new Uint8ClampedArray(waInstance.export.memory.buffer, byteOffset, width*height*4), width, height)

imageData has a pointer to your data. On every rendering, do your work in WebAssembly and use the same imageData in context.putImageData(imageData), doing only once a big data copy per cycle.