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?

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?

• javascript
• html
• canvas

• 2 I would imagine that's implemetation-specific, but it'd be crazy not to perform such a check. – Niet the Dark Absol Commented Aug 7, 2012 at 14:45
• I'll check it myself when I have time and then I'll answer the question. In the meantime, maybe someone already has the data... – corazza Commented Aug 7, 2012 at 14:47

2 Answers 2

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/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/Yannbane/PVZnz/3/.

You need to perform this check yourself and skip drawing if a figure is out of the screen.

That being said, some browsers do optimize this in some conditions. I found out while writing an article on the IE9 performance profiler a while back that IE9 will optimize away drawing an image if it is out of bounds. The transformation matrix may have to be identity for this optimization to work, and either way you shouldn't rely on browsers doing it.

Always always check.

edit: You can run this simple test to see: http://jsperf./on-screen-vs-off

It looks like Chrome and Safari certainly optimize it, at least in simple cases, and firefox doesn't really