Is putImageData (...) more productive than drawImage (...)?

Question

I think so, but I had to prove it.

I think this is the same case as for Flash and its bitmap vs BitmapData. Basically, BitmapData is a non-visual data extract in Bitmap that makes it very easy and quick to manipulate.

I think that for high-performance solutions, such as games, extracting ImageData from each image (for example, every sprite) and caching it in the "assets" dictionary is a better solution than drawing the sprites themselves on the canvas again and again.

Can anyone prove this?

Answer 1

I do not take responsibility for conducting this test together, but you can clearly see the performance of using drawImage() with both the canvas and the image, as well as the performance of putImageData() here:

http://jsperf.com/canvas-drawimage-vs-putimagedata/3

As of now, drawImage() much faster than putImageData() . The last thing I heard was not intended, and browser developers were studying the improvement in the performance gap.

Answer 2

http://jsperf.com/ provides excellent tools for this kind of comparisons, check this out, I think this is exactly what you need.

Answer 3

In addition, putImageData does not work when a crash occurs in the same incident - police

Answer 4

For large canvases, I found that it hasn’t changed so much, but putImageData is definitely not as effective as drawImage for copying canvases.

Here are some sample tests I used: http://jsperf.com/canvas-size-test-case/3

As a result, I had performance problems with the total canvas size, regardless of the size of the data that I actually copy.