Jump to content


Tweening a svg object in canvas

Go to solution Solved by OSUblake,

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

Hi all,


I have been playing around with html5 canvas and I was trying to move my circle object around in the canvas window using a timeline, but I have no idea on how to proceed. I am familar with DOM and CSS methods but i am aware that Canvas is a whole new thing. I have looked on a simple tutprial on how to do this but I have not found any as of now. Any help would be greatly appreciated.


Mr joePro

See the Pen dpGqqZ by w9914420 (@w9914420) on CodePen

Link to comment
Share on other sites

  • Solution

Hi ,


Unfortunately, we don't get a lot of questions asking about how to use GSAP with the Canvas API, so you're not going find a lot of information. One of the reasons for this is that the Canvas API is very small, and how stuff gets rendered is largely going to be up to you. There is no correct way of working with the two. This is unlike working with the DOM, which uses a very complicated scene-graph to manage the layout and how things get rendered, so you must follow a very rigid set of rules.


However, the flexibility offered by the canvas is also what makes it harder to understand, so there are a few key things you should know about it. First, canvas uses immediate mode rendering. It does not retain any information about what it draws. It's just a blob of pixels, so there is no way to directly update something after it's drawn. If you want to change the position of a circle, you have to redraw the circle at the new position. 


There's really only 1 object to work with, the context, and changing its state determines how things get rendered. It's not declarative like the DOM where you can just say, "Create a blue box at some position". With canvas it's more like, "Hey context, I want to draw something. Move to some position. Now draw a box. Now change your fill color to blue. Now add a fill to what we just drew. Ok, I'm done drawing."


This means that you have to provide your own way of managing and keeping track of everything. For now, a simple object like this will do. Just think of it as being an element, and is what you would tween in GSAP.

var myCircle = {
  radius: 50,
  x: 100,
  y: 100

Now that you have an object to tween, you need to create a rendering loop to update those changes to the context. For this you can use GSAP's ticker to manage when the update should be called. Inside the update is where you will issue drawing commands to the context. But before you draw anything, you will usually need to clear the canvas like this.

See the Pen 79958c423de57da6a086f12e9666cb78?editors=0010 by osublake (@osublake) on CodePen


Look at what happens when you don't clear the canvas...

See the Pen b2317427e53aba218d6ecbe24fec2bd7?editors=0010 by osublake (@osublake) on CodePen


Probably not what you want, but that is the basis for something that can really only be done with canvas, a trailing effect. This is done by drawing a semi-transparent rectangle over everything, causing previously drawn stuff to fade out over time.

See the Pen d81b5c68bff283713e6d8133f8d86c6e?editors=0010 by osublake (@osublake) on CodePen


Trails can be used to create some pretty awesome effects, like these fireworks...

See the Pen 907f29eeb4372d0d83c5b6a292d1727b?editors=0010 by osublake (@osublake) on CodePen


Or this particle emitter...

See the Pen oLGBXy?editors=0010 by osublake (@osublake) on CodePen


Now that you know a little about how how to update and redraw the canvas, everything else becomes much easier. To draw an SVG you just need to tell the context where to draw it using the drawImage() method.

See the Pen 6d399e36986208e60f1f0efe6f58daa2?editors=0010 by osublake (@osublake) on CodePen


If you want to see that on insane mode, check out this demo using Pixi.js. Press down to add more bees.

See the Pen ORJjGj by osublake (@osublake) on CodePen


If you haven't already, you should look go through the canvas tutorial on MDN. It's really helpful.



Hope that helps!

  • Like 7
  • Thanks 1
Link to comment
Share on other sites

Great write-up, Blake. Comprehensive and clear!

Link to comment
Share on other sites

Thanks! A lot of people seem to struggle with canvas. I think part of the problem is that they're trying to approach it like the DOM or other canvas libraries, which of course won't work. Canvas is just a bitmap that you can edit with JavaScript. That's why when you right-click on it, it says, "Save image as...".


For code comparison, I made an SVG version of that drawImage demo. The canvas version obviously requires more code, although I wouldn't count the load image function as part of the code since as I could have used an SVG image. 


SVG - 

See the Pen f2b6c985cf2da0ba493adc8c8c5ae512?editors=0010 by osublake (@osublake) on CodePen

Canvas - 

See the Pen 6d399e36986208e60f1f0efe6f58daa2?editors=0010 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

pretty cool .. it shows chrome only but i saw it working in Firefox on Windows 10

Link to comment
Share on other sites

Hi OSUblake,


I just want to say a very big thank you for detailing and giving examples to how canvas works, a very well written eloquent article.  ;-)

We were very curious to how difficult it would be to animate svg images on the canvas. From you explanation and examples we concluded that it would require a lot of work and more so a lot of code.


One more thing about Canvas if it uses an immediate mode rendering, if for example you have a series of different svgs that you want to animate using different timelines one after another, would that be at all possible since it works by using a rendering loop? (just a thought)


So that being said, again many thanks OSUblake for you article (I wonder if this article could be a sticky for Canvas use.)




JoePro aka (Mr I)

Link to comment
Share on other sites

Yeah, you can do multiple SVGs and timelines. The rendering loop is your own logic, so you can pick and choose what you want to be drawn. But as you've noticed, it can start adding up to a lot more code. That's why there are so many canvas libraries out there, and they all simplify this process.


If you're interested in working with SVG on the canvas, you should check out Paper.js. It has full SVG import/export, it's own DOM, and no rendering loop for you to manage.



Fabric.js is another canvas library that specializes in SVG, but it's not as focused on the vector aspect as Paper.js is.



Both of those libraries will work with GSAP.

  • Like 3
Link to comment
Share on other sites

Hi OSUblake,


many thanks again, i think you are on a roll today!!





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.