accessing the ArrayBuffer of a <canvas> 2d directly, and making ArrayBufferViews on it

[trusktr]

It seems that the only way to get data from, or send data to, a <canvas> involves copying.

What if instead of writing data to an array buffer and then passing it via ctx.putImageData to be copied to the context's buffer, we could just write directly to the context's buffer without a copy?

This could increase performance in certain scenarios. I'm curious as to why such a thing doesn't exist.

[pshaughn]

My understanding is that the canvas buffer isn't guaranteed to be laid out in the same pixel order as an ImageData. In particular, ImageData can be any width, while implementations are free to internally use a texture with a width that's a power of 2 or some other convenient value.

[Kaiido]

There seems to be a misunderstanding of what a canvas buffer is here. It is not an ArrayBuffer, it's a bitmap.
How this bitmap stores the actual pixel values is left to implementers and as has been said already, it doesn't map to what you get from an ImageData object.

Note: you can already transfer an ImageBitmap to a bitmaprenderer context.

And here are some related proposals regarding not assigning a new ArrayBuffer when calling getImageData: 1, 2.

[trusktr]

@Kaiido #5707 does indeed basically cover the desire of not allocating new memory repeatedly. 👍

However the idea in #5707 still requires double the memory use (one for the canvas, one for the external buffer to hold canvas data, whatever its called).

The idea here was to use only one array in memory (the one for the canvas itself).

If the canvas bitmap may vary from vendor to vendor, then what about instead introducing read/write methods that accept indices? Maybe that could speed up certain types of code (so as not to have to allocate extra memory for read/write, but instead just read/write directly to canvas memory)?