Huge opacity slowdown...

So I was testing something out with transparencies for an effect I was going to use in another game, when I discovered this. Having one transparent square over the screen results in a barely noticeable performance hit, still being plenty playable, but if you put TWO transparent squares, the framerate drops like crazy.

db.tt/61FvHuSV

Here's what I'm talking about. I couldn't reproduce it with a barebones project, so I'm guessing it only affects bigger games -- though mine isn't even that big right now! The two transparent objects, one white and one black, are on the "Fade" layer at the top. You can "disable" them by setting the opacity to 0.

You'll notice that with both disabled, the game runs at a smooth 60-63 FPS (as indicated by the little text thingy). With one enabled, it drops to 50-60, but it doesn't disrupt the game much at all. With both enabled... it SAYS it's going about 40 FPS, but it feels more like 15-20. That's not good enough to play with, not even close.

So, I guess my real question here is, is this just a limitation of the current speed of HTML5? Will this eventually go away, or should I just avoid using this for effects till the end of time?

It depends on the browser. I see you've got 'Preview browser' set to Chrome which does not have a hardware accelerated canvas. It runs 50fps in Chrome for me, but still silky smooth 60fps in Firefox 7 and IE9, which both have a hardware accelerated canvas. It's also slow in Opera and Safari which don't have hardware acceleration yet either.

I think Chrome are adding hardware acceleration soon. Not sure about Opera or Safari.

BTW, you shouldn't use an opacity of 0 to hide an object - it still attempts to render the object, which takes rendering time, you just don't see anything. Set the object to invisible and it does not even attempt to render the object, which is faster.

Alright, thanks a bunch for clearing that up -- and for the opacity tip!

Chrome has an option in about:flags

"GPU Accelerated Canvas 2D

Enables higher performance of canvas tags with a 2D context by rendering using Graphics Processor Unit (GPU) hardware."

I think it's disabled by default though.

I think they'll be enabling that by default in a future release of Chrome, so probably best to wait it out then everyone's got it.