I think putImageData is faster than drawImage, but I need to prove it.
I guess it is the same case as with Flash and its Bitmap and BitmapData classes. Basically, BitmapData facilitates a non-visual extraction of the data in a Bitmap object, which allows for very easy and fast manipulation of it.
I'm guessing that in high-performance cases, such as games, extracting the ImageData from every image (for instance, every sprite) and caching it in an "assets" dictionary is a better solution than drawing the sprites themselves onto the canvas over and over again.
Could someone prove this?
I think putImageData is faster than drawImage, but I need to prove it.
I guess it is the same case as with Flash and its Bitmap and BitmapData classes. Basically, BitmapData facilitates a non-visual extraction of the data in a Bitmap object, which allows for very easy and fast manipulation of it.
I'm guessing that in high-performance cases, such as games, extracting the ImageData from every image (for instance, every sprite) and caching it in an "assets" dictionary is a better solution than drawing the sprites themselves onto the canvas over and over again.
Could someone prove this?
Share Improve this question edited Mar 21, 2019 at 9:30 Magnus Lind Oxlund 1451 gold badge13 silver badges21 bronze badges asked Oct 11, 2011 at 5:56 user802232user802232 2,6117 gold badges37 silver badges41 bronze badges 1- Also, putImageData not work when same-origin-police is breaked – Shock Commented Oct 27, 2011 at 10:55
2 Answers
Reset to default 14I take no credit for putting this test together, but you can clearly see the performance of using drawImage() with both a canvas and an image as well as the performance of putImageData() here:
http://jsperf.com/canvas-drawimage-vs-putimagedata/3
As of right now, drawImage() is much faster than putImageData(). Last I heard, this was not intended and the browser developers were looking into improving the performance gap.
For larger canvases I found that it didn't make as much of a difference, but putImageData is definitely not as performant as drawImage for copying canvases.
Here are some test cases I used: http://jsperf.com/canvas-size-test-case/3
I did end up having some performance problems with overall source canvas size, regardless of the size of data I'm actually copying.