CODEWITHSUNDEEP
htmlcsscanvas
ixx
ixx

Reputation: 32269

Mixing canvas and CSS3 elements

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.

Upvotes: 12

Views: 1159

Answers (3)

zsitro
zsitro

Reputation: 1892

Consider using only one of the mentioned two technology. May be you can release that application in mobile or tablet. I think on these devices would be issues with handling both the same time. And another thing: if you stay in canvas there would be no worries about compatibility. Its not a techy but a thought-provoking answer.

Upvotes: 2

beeglebug
beeglebug

Reputation: 3552

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.

Upvotes: 1

tnt-rox
tnt-rox

Reputation: 5558

One way to approach this is to use a "dynamic" image map behind your canvas object. Then you can use the dom as required. Note you will need to pass the clicks on the canvas through to the image map.

Upvotes: 0

Related Questions