11

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?

Magnus Lind Oxlund
  • 304
  • 1
  • 6
  • 19
user802232
  • 2,541
  • 7
  • 34
  • 40

2 Answers2

13

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.

Xenethyl
  • 3,179
  • 21
  • 31
  • I see. My browser shows the same. This makes not much sense, though. I expected that making manipulations using ImageData is much faster, than opening an image, extracting its data, and putting it on the canvas. At least, in Flash, manipulating BitmapData is the preferred method for doing performance operations – user802232 Oct 11 '11 at 07:55
  • 1
    The way classical Flash(not new Stage3D/Molehill stuff) optimizes things is all in main memory and then copy that into graphics memory. Canvases reside primarily in graphics memory(depending on browser/version/moon-phase) and to modify pixels via javascript that imagedata is going to need to be copied into main memory. Then to draw that imagedata you need to copy the it back to graphics memory. – Gabe May 10 '12 at 13:52
  • Reading graphics memory from the main CPU is EXTREMELY SLOW on almost all video cards... Look at the specs for reading RSX memory from the Cell on the PS3(4GB/s write vs 16MB/s read {{256 times slower!}}) http://www.ps3devwiki.com/index.php?title=RSX%23Speed.2C_Bandwidth.2C_and_Latency#speed_table (the Cell is the main CPU and the RSX is an Nvidia-designed GPU) – Gabe May 10 '12 at 13:58
  • According to the [latest jsperf](https://jsperf.com/canvas-drawimage-vs-putimagedata/93) test revision, `drawImage()` is still fastest by far. – djvg Nov 28 '18 at 11:23
  • 3
    Link displaying Application Error. Any chance of a new link? – Damien Golding May 25 '21 at 03:50
  • 1
    The link gives "This Serverless Function has crashed". – Joseph Quinsey May 28 '22 at 14:25
  • jsperf.com is closed due to spam, so that link won't work. – Infigon Jul 25 '22 at 15:18
0

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.

floatingice
  • 179
  • 6