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

1. Anyway, you will have to copy pixels to WebAssembly.Memory instance. Then modify and copy back.
2. I don't know why, but Uint8Array.set() is not fast in latest Chrome. It's better to recast data to 32 bit (new Uint32Array(your_uint8array)), and then use Uint32Array.set() to copy.
3. Keep in mind, that canva's .getImageData()/.setImageData() are not fast. Probably, because they do alpha premultiply and other things.

To summarize things: your most speed loss will be in .getImageData/.setImageData, and that can't be avoided. Other things have workarounds.

If compare with optimized JS, wasm will give you 10-20% of benefits, not too much.