Quantcast
Channel: Why is putImageData so slow? - Stack Overflow
Viewing all articles
Browse latest Browse all 5

Answer by Daniel Baulig for Why is putImageData so slow?

$
0
0

Just a small update on what the best way is to do this. I actually wrote my Bachelor Thesis on High Performance ECMAScript and HTML5 Canvas (pdf, German; password: stackoverflow), so I gathered some expertise on this topic by now. The clearly best solution is to use multiple canvas elements. Drawing from one canvas onto another canvas is just as fast as drawing an arbitrary image to a canvas. Thus "storing" the state of a canvas is just as fast as restoring it later again when using two canvas elements.

This jsPerf testcase shows the various approaches and their benefits and drawbacks very clearly.

Just for completeness, here how you really should do it:

// setupvar buffer = document.createElement('canvas');buffer.width = canvas.width;buffer.height = canvas.height;// savebuffer.getContext('2d').drawImage(canvas, 0, 0);// restorecanvas.getContext('2d').drawImage(buffer, 0, 0);

This solution is, depending on browser, up to 5000x faster than the one getting the upvotes.


Viewing all articles
Browse latest Browse all 5

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>