Is putImageData faster than drawImage?

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 开发者_JAVA百科again.

Could someone prove this?

I 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.