Question

I know that one of the most expensive operations in HTML5 gamedev is drawing on the canvas. But, what about drawing images outside of it? How expensive is that? What exactly happens when the canvas is 100 by 100 pixels and I try to draw an image at (1000, 1000)? Would checking sprite coordinates to make sure it is inside the canvas make rendering more efficient?

Answer 1

In these tests I used Google Chrome version 21.0.1180.57.

I’ve made a small fiddle that tests this situation… You can check it out here: http://jsfiddle.net/Yannbane/Tnahv/.

I’ve ran the tests 1000000 times, and this is the data I got:

Rendering the image inside the canvas lasted 2399 milliseconds.
Rendering the image outside the canvas lasted 888 milliseconds.

This means that drawing outside the canvas does take some time, roughly, 37% of time it would take to render it inside.

Conclusion: It’s better to check if the image is inside the canvas before rendering it.

But, of course, I wanted to know how much better… So, I did another test. This time, I, of course, implemented boundary checking, and got that it only took 3 milliseconds to “render” the image outside the canvas 1000000 times. That’s 29600% better than simply rendering it outside.

You can see those tests here: http://jsfiddle.net/Yannbane/PVZnz/3/.