O'Reilly logo

Core HTML5 Canvas: Graphics, Animation, and Game Development by David Geary

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

4.9. Performance

Performance can be an important consideration when you are manipulating images. This section discusses three benchmarks from jsperf.com that address the following performance concerns:

• Looping through image data

• Using drawImage() vs. putImageData()

• Drawing a canvas instead of an image with drawImage()

• Scaling when you draw images with drawImage()

As always, be aware that the results of any benchmark can change significantly over time and across different browsers. You should regard all the performance recommendations that follow as guidelines for your own code, not as fundamental principles. It’s also a good idea to go to jsperf.com to look the current state of the benchmarks.

4.9.1. drawImage(HTMLImage) vs. drawImage(HTMLCanvas) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required