Why is putImageData so slow?

by

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:

// setup
var buffer = document.createElement('canvas');
buffer.width = canvas.width;
buffer.height = canvas.height;


// save
buffer.getContext('2d').drawImage(canvas, 0, 0);

// restore
canvas.getContext('2d').drawImage(buffer, 0, 0);

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

More Related Contents:

  1. draw 10,000 objects on canvas javascript
  2. What is the best way to set a register to zero in x86 assembly: xor, mov or and?
  3. Canvas is stretched when using CSS but normal with “width” / “height” properties
  4. Enhanced REP MOVSB for memcpy
  5. Why is Skylake so much better than Broadwell-E for single-threaded memory throughput?
  6. How to speed up A* algorithm at large spatial scales?
  7. Branch alignment for loops involving micro-coded instructions on Intel SnB-family CPUs
  8. Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures?
  9. What methods can be used to efficiently extend instruction length on modern x86?
  10. What is the performance impact of the universal selector?
  11. How to draw polygons on an HTML5 canvas?
  12. Best way to execute js only on specific page
  13. Why should recursion be preferred over iteration?
  14. Why is variable1 += variable2 much faster than variable1 = variable1 + variable2?
  15. LCP time between LightHouse and Performance – Google Chrome
  16. simplest tool to measure C program cache hit/miss and cpu time in linux?
  17. Does the tag position in HTML affects performance of the webpage?
  18. Why is division more expensive than multiplication?
  19. Should a developer aim for readability or performance first? [closed]
  20. Chart.js canvas resize
  21. Placing a within a
  22. Angle gradient in canvas
  23. Return address prediction stack buffer vs stack-stored return address?
  24. When should we use prefetch?
  25. Relative performance of x86 inc vs. add instruction
  26. Efficient sse shuffle mask generation for left-packing byte elements
  27. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  28. how to animate drawing lines on canvas
  29. True Isometric Projection with HTML5 Canvas
  30. How to analyze golang memory?

Leave a Comment