'Fast double buffered data display with simultaneous iteration for HTML5 canvas

I'm in the process of trying to optimize a game consisting of a HTML5 canvas. The basic game idea is to take an ImageData object (presumably with getImageData) and modify it, replacing the original (presumably with putImageData). Problem is I'm concerned with the performance of getImageData followed by putImageData as the process of transferring to and from a canvas object is quite cumbersome when ideally one could just write to it directly instead. Essentiallt hoping to display a Uint8Array **while** also reading said array for the next iteration.

This is me postulating but considering how I'm *just* taking ImageData from a canvas object and using it to modify another I fail to see the need for any data to be copied as a whole ever. The data could be read from one `ImageData´, written to another after which the canvas image reference could be switched with both objects being allocated from the very beginning.

I guess what I'm after is some sort of double buffering? The idea is to modify a dataset, display it, and then use that same dataset on display for the next iteration avoiding unnecessary copying in between.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source