Alex Rivera | Logout

Mixing canvas and CSS3 elements

Asked 2012-04-08T17:29:46.010
12

I'm implementing a HTML5 game using canvas. Now I'm thinking about making all text overlays like tooltips, speechbubbles, infowindows and so on using HTML elements with position absolute over the canvas. So I can use many effects and transitions CSS3 offers.

But I'm not sure about performance. These overlays have to be added and removed frecuently (is something MMORPG like, so there will be a lot of speechbubbles and so on).

There are probably 2 questions regarding performance:

  1. DOM traversal to add/remove. Maybe a cache can help?

  2. HTML and CSS3 itself.

The other option is to manage these elements in the canvas itself, drawing them each frame. But maybe I have then again a performance penalty, because of the extra code, timeouts and stuff I would have to add, to achieve similar effects like in CSS3. And traversal of some data structure would be needed anyways.

Any advices, opinions, experiences?

Thanks in advance.

html css canvas
Edit
Report

1 Answer

1

The single best reason for using the DOM for UI elements in HTML5 games is event handling.

If you draw everything on canvas you will need to write your own logic to handle clicks and decide what has been clicked on, which can soon become very complex, expecialy if you have multiple layers of interface.

With DOM elements (especially when using a library like jQuery) this is trivial, and you can create a rich and interactive UI with minimal effort.

The only downside I can think of is that you may encounter browser inconsistencies, especially if using CSS3, but again jQuery will help with this.

I suppose another downside is that once you go down the DOM route, your game is always going to be a browser game, whereas if it was 100% canvas, there would always be the possibility of porting the code to another language and making it native, but I guess that would only be a downside for some people.

answered 2012-08-31T08:50:20.087

Your Answer