Canvas vs regular DOM elements

[next2heaven]

What are the main advantages to using canvas rather than moving around divs?

[Jonathan]

Hello next2heaven, and Welcome to the GreenSock Forum!

 

It really depends on what you are trying to do. Each one has advantages and disadvantages.

 

Here are some great articles on the difference of the two 

• http://www.kirupa.com/html5/dom_vs_canvas.htm
• http://gamedev.stackexchange.com/questions/23023/to-canvas-or-not-to-canvas-when-building-browser-based-games
• https://www.google.com/#q=animation+animating+canvas+vs+dom

For example here is a simple performance counter test comparing Canvas vs Dom: http://jsperf.com/canvas-vs-dom-countdown

 

Here is a performance test that has canvas EaselJS vs jQuery: http://jsperf.com/canvas-vs-dom-perftest/2

 

As you can see the jQuery is slower, but that is understandable since jQuery is really slow for some things.

 

But with GSAP you can animate any object or property using Canvas, DOM, and SVG

 

[next2heaven]

That helps a lot.  Thank you.

[Halcyon]

I noticed that test you ran comparing DOM vs Canvas. I just thought it would be worth mentioning that if you're not styling anything or doing any actual HTML, using .textContent is much faster because it doesn't have to interpret the value at all. I use this in cases where I know it's just going to be a simple value like an integer or a string (score, name).

[Jonathan]

Hello Maelfyn,

 

if you look at these following links, you can see other speed tests comparing textContent to other text methods:

• jquery-html-vs-text-vs-innerhtml-vs-innertext-textcontent: http://jsperf.com/jquery-html-vs-text-vs-innerhtml-vs-innertext-textconte/8
• read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent: http://jsperf.com/read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent/3
• read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent 2: http://jsperf.com/read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent/13
• innerhtml-vs-textcontent-for-script-text: http://jsperf.com/innerhtml-vs-textcontent-for-script-text
• innerhtml-vs-innertext-vs-textcontent: http://jsperf.com/innerhtml-vs-innertext/10
• textcontent-vs-createtextelement: http://jsperf.com/textcontent-vs-createtextelement/19
• read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent: http://jsperf.com/read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent/5

And if you like, jsperf also allows you to create your own JS performance tests

[Halcyon]

Thanks... I don't know what the deal is with that website, but I often get very different test results when I run my tests in the console versus the same thing on their website. I think I'll stick with Firebug console tests.

 

And back to the original question, I have never seen a workflow with canvas that didn't seem painful so I have kind of avoided using it. I would never finish my game if I tried to use canvas. Everyone seems to believe it is the best choice for games, and the crowd is probably correct, but I just can't get into it. I really enjoy creating DOM-based animations and I've had good success with it. Perhaps a canvas guru could show us a good workflow with greensock, but until then I think I will stick to using the DOM.

 

The most obvious limitations of using the DOM is it's very hard, or even impossible, to achieve some fancy image effects like blurring, masking, rippling, color izing/desaturating, filtering, etc. Honestly, I dream of the day when I do image processing on any DOM object:

TweenMax.to(monsterImage, 1, {
  blur:5,
  colorize: '#ff0000'
});

[Jonathan]

Maelfyn, Yes i like DOM based over canvas. But I still love canvas, because some stuff reminds me of Flash.

 

When testing on jsperf.com.. Google Dev Tools Team recommends testing in a incognito tab / window so the results don't get skewed when using dev tools. You could also try the same when testing in Firefox using Private Browsing when using FireBug.. 

[OSUblake]

One thing to consider is that performance on a lot of mobile devices is pretty bad with canvas unless you use an accelerated canvas wrapper like CocoonJS. The problem with that approach is that the user has to download an app that you deploy.

 

Fortunately WebGL is becoming more of the standard now, which can greatly improve performance over the 2D canvas, especially on mobile devices. The downside is that programming for WebGL can get pretty complicated without a library.