CODEWITHSUNDEEP
htmlanimationcanvas
opes
opes

Reputation: 1828

HTML5 Canvas - Animating color, scale, and rotation

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.

Upvotes: 0

Views: 4879

Answers (2)

me_digvijay
me_digvijay

Reputation: 5492

The problem I can see is with your restore method call. You are just saying ctx.restore (possibly by mistake). It should be ctx.restore();

Upvotes: 0

Ry-
Ry-

Reputation: 224942

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.

Upvotes: 4

Related Questions