Question

I’m new to canvas, so pardon the beginner question. I’m trying to animate a square on a canvas that changes colors, rotates, and scales up and down (this is just for practice). I’m just trying to grasp all of the concepts and create an example that does all of them at once.

What I want it to do is scale up to a certain amount, then once it reaches that amount, it scales back down to the beginning amount (and then repeats). The same goes for the color (continue animating, then go backwards through the colors). How can I accomplish this?

Here’s an example of my code that I wrote:

http://jsfiddle.net/ggsFJ/1/

You’ll notice a couple bugs:

1. Once the color gets to yellow, it stops animating.

2. The scaling obviously doesn’t work.

3. The rotation isn’t either clearing the canvas fast enough or something, because it’s showing a trail of positions.

Where can I find some resources on accomplishing this? Any help is appreciated.

Answer 1

There’s one small problem that’s causing all the other problems (well, apart from the yellow – I’m not experiencing that particular one):

ctx.restore;

That line does nothing. You need to call ctx.restore using parentheses. Once you do that, the scaling works, and clearRect() will clear a non-transformed rectangle:

ctx.restore();

And here’s the updated demo.