Is it possible to draw an Uint8ClampedArray directly to a canvas?

Question

In JavaScript, you can manipulate pixels of an image directly using an Uint8ClampedArray. Before rendering that image to a canvas, you have to:

1. Create an ImageData object.

2. Render the Uint8ClampedArray to an ImageData object with ImageData.data.set.

3. Draw that ImageData object to the canvas with context.putImageData.

So, from having an Uint8ClampedArray with your image, to actually seeing it on screen, it takes no less than 3 O(N) copying operations. For big images, that can be very detrimental. One solution would be to cache the ImageData object, and replace the pointer imageData.data to your Uint8ClampedArray - but imageData.data is readonly! Is there any way to do this more efficiently?

Answer 1

According to MDN's page on ImageData, the ImageData(array, width, height) constructor takes a first argument that is

A Uint8ClampedArray containing the underlying pixel representation of the image.

A quick test verifies that this argument is used by reference (i.e., not copied) as the ImageData's data property. This test logs true:

var arr = new Uint8ClampedArray([0,0,0,0]);
var idata = new ImageData(arr,1,1);
console.log(idata.data === arr);

Thus, you can eliminate your second step by constructing the ImageData object in your first step with data property that references your Uint8ClampedArray object.