Which one is a resource efficient approach : CSS3 Stylesheet or Canvas API for a HTML5 app to be ported as Blackberry Webworks

Question

I'm developing a Math-based game/app using HTML5 technologies (HTML5 + CSS3 + javascript) for the upcoming Blackberry 10 Devices, to be ported using Blackberry WebWorks.

The game requires generation of lots of random numbers. I'm currently generating them in "p" tag and styling them. But some guy suggested me not to use Stylesheet so much and rather use Canvas API.

Is there any effective/performance-improving reason to listen to the suggestion or it is just any suggestion ?

Answer 1

I look it at this way:

HTML tags have pre-defined properties and behaviour such as padding, floating, relative positions, etc. Making use of these tags ensures that the developer does not have to write tons of code to mimic this trivial behaviour. Think of building a list: using <ul> and <li> will take care of the positioning for you. In canvas you need to create this from scratch or look for a library. HTML/CSS IMO is perfect for Web Apps. In terms of performance, make sure your animations are done in the GPU (using 3d transforms) and the performance is great. It is easy to respond to different screen sizes when using HTML/CSS too.

Games tend to use absolute positioned elements that are manipulated directly (example, move player from 100px to 150px) and are therefore easier to work with in Canvas. Performance-wise, canvas2d operations are hardware accelerated, so it should be as smooth as using HTML/CSS.