Performance out of canvas

[Bagongo]

Hello,

I am developing a game using several canvases (3) on top of one another. I am close to finishing the game and I haven't yet optimized the performance, it's my first game so any suggestion on the matter is more than welcome...

Anyway, my main concern is that the game has performed pretty well so far, but being close to finish I am building a simple web page around the canvas to give a frame to the game. I am talking just putting the title of the game and a few links here and there, but suddenly the game is now choppy and slow!!! If remove those elements everything is smooth again.

The culprits are:

-The game title above the canvas (styled with text-shadow).

- four buttons below the canvas to redirect to other sites and credits.

Is it possible that this few static elements interfere with the rendering of the game???? Also what are the common procedures to test game performance and track leaks to optimiza performance?

Thank you!!!!

[mattstyles]

Text-shadow is slow, although I'm still surprised its having much affect on the canvas rendering. Check out some articles about how browsers actually render stuff, they're normally pretty interesting (off the top of my head MDN and the Opera site have a few that I've read that were good). Overlaying elements can be bad for perf and there are all sorts of CSS stuff that can also smash in performance, such as gradients, shadows, opacity etc etc. Its mainly to do with blit regions but can also be to do with how much automatically gets offloaded to the GPU and how much doesn't. Generally for desktop machines this isn't too much of a problem, but for mobile it can (still, unfortunately) be a disaster.

Still though, doesn't sound like you are doing anything on the page that would have such adverse affects, have you got a link to the page?

Learn to use the browser developer tools, Chrome are still the best but the others are now catching up. Learn to use the profiler, this will help point you to where any problems might be i.e. are you doing something in your JS that is clogging up the process or maybe you're spending too much time drawing/over-drawing, usually its the latter. The tools will also help to track memory leaks, spotting a memory leak is usually fairly easy but actually tracking it down can be more difficult, if users don't stay long on your page (i.e. traditional web pages) these leaks aren't a problem but for games or apps where the user will stay longer they can eventually kill things, as can heavy use of garbage collection. The GC switching on to do its thing can nuke perf. The timeline in Chrome can be used hand-in-hand with the profiler to give you an idea of where your process is living.

There are also various plugins and addons for browsers that can help manage memory, JS and rendering performance and give you handy insights although if you find one specifically targetted at monitoring JS heavy games/apps then please let me know!

[Aer]

Yeah text shadow is really bad and it shouldn't be overlaying the game as well.

You should consider using an image instead, loading fonts tends to slow loading down too.

And make sure all your css is correctly positioned and not moving or being affected by other elements moving (like a hover effect)