Jump to content
Search Community

Performance Difference Between DOM vs Canvas using Greensock

Halcyon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Up to this point I have animated everything as a DOM element, but I always want to push the performance of my game more and more, so I have started to look closer at canvas. I am curious about what kind of performance gain I can expect from animating a cached javascript element vs an element on a canvas.

 

Any resources, insights, or experiences on this topic would be greatly appreciated.

Link to comment
Share on other sites

Well the short answer is that you will have a huge performance gain. However this will be noticeable on desktop browsers, on mobiles canvas offers little performance gain.

 

I have experimented with DOM animating objects for a game but could not get passed the 30fps when items got more than 20-30. Whist with Canvas over 100 items did not drop the frame rate below 60fps. 

 

Of course both experiments were done using GSAP as the animation engine. Also I was using KinectJS for canvas manipulation.

Link to comment
Share on other sites

There is no easy answer here. It completely depends on your particular scenario. Some things are super fast with canvas, while others are faster with DOM. Some things (like hit detection, layout, and GPU acceleration of certain properties) you get for "free" with DOM, but are expensive in canvas. Then again, certain things require much less memory and/or CPU involvement with canvas. For example, if you try creating 1000 tiny boxes and animate them using their top and left CSS properties, it will perform HORRIBLY compared to canvas because you must create a new DOM element for every dot, and each element affects layout, eats up memory, etc. whereas canvas doesn't have any of that overhead. It's just pixels and a generic JS object.

 

It also depends on HOW you are rendering things on your canvas. Certain libraries are faster than others. If you write your own rendering logic, it may be fastest of all (if you really know what you're doing). WebGL can be leveraged for canvas and can do amazing things.

 

I'd strongly recommend doing some experiments of your own. Let us know what you find.

 

Oh, and I hear good things about PIXI, for what it's worth. I haven't personally used it, but I've seen impressive stuff built with it.

  • Like 1
Link to comment
Share on other sites

Yeah, I was particularly interested in rendering particle effects using canvas since that would seem to be a good choice. I have no real need to reference a particle using id or anything. They're pretty much fire-and-forget animations that last a certain amount of time. There are a lot of them and they all animate independently. Seems like a good choice. I'll try to get around to experimenting with this and report my findings.

Link to comment
Share on other sites

The other thing to be aware of is that the performance of canvas is often resolution dependent. e.g. a 300x300 canvas is going to be super fast, but I'd expect a 1500x1500 canvas to be anything but. Also, if you set your canvas up to use a high pixel density (for phone and tablet screens) then it's rendering dimensions will be dramatically increased, along with the performance penalties. Good luck with your experiments :)

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.
×
×
  • Create New...