Is putImageData faster than drawImage?

Question

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?

Answer 1

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.