Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
next2heaven

Canvas vs regular DOM elements

Recommended Posts

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

Link to comment
Share on other sites

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 

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

 

:)

  • Like 2
Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Hello Maelfyn,

 

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

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

  • Like 1
Link to comment
Share on other sites

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'
});
Link to comment
Share on other sites

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..  ;)

  • Like 1
Link to comment
Share on other sites

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.  

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×