On Sat, Feb 12, 2011 at 10:03 AM, Leandro Linares <[email protected]>wrote:
> Hi all, > > I'm currently developing games based on javascript, and I have a big > doubt: what are the advantages/disadvantages of canvas vs. DOM in > javascript game development? > > My question arises from Paul Bakaus' talk about Aves Engine, where he > defends that css3 and DOM manipulation is faster and scalable than > html5 canvas (Perfectly explained on > > http://paulbakaus.com/2010/07/19/why-canvas-is-not-an-obvious-choice-for-web-games/ > ) > > I tested run two alike games, each developed with one of both > methodologies (canvas and dom), and canvas based game ran very slow on > smartphones, while the DOM based game ran very well. On desktop > browsers, both games ran with no problems. > > So, question is: which one technology is the best choise (present and > future) for browser game development? > With the rise of hardware accelerated rendering, I would think canvas performance will only get better in a near future. I'm not sure how that will affect DOM parsing/rendering. While working on fabric.js (interactive object model on top of canvas), I noticed that latest browsers have no problem rendering hundreds of simple shapes (or complex shapes, consisting of thousands of bezier curves) at a decent speed. See for example this demo http://kangax.github.com/fabric.js/test/demo/ I haven't done any comparisons with DOM-based rendering, but I did find that canvas-based rendering can outperform svg-based one in certain cases. See this Raphael vs. Fabric test http://kangax.github.com/fabric.js/test/raphael_vs_fabric/complex_shape.html With canvas, it's also possible to apply optimizations like "dirty rectangles", which could boost performance even further. [...] -- kangax -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/[email protected]/ To search via a non-Google archive, visit here: http://www.mail-archive.com/[email protected]/ To unsubscribe from this group, send email to [email protected]
