Moving on from my last post in which I drew the CJ origami bear using HTML5 Canvas, I discovered that animating it was a lot tougher.

Setting the canvas to refresh every third of a second, it was obvious that I needed to write a function that would plot the new points of the shape as it moved. Manually setting these each time would be ridiculous!

The process of animating with Canvas follows three steps: Draw, update and clear.

• So first you draw your shape, which I had done previously.
• Then you have to update its position. This could be a relatively simple function; for example adding 1 to the x coordinates each time would move the shape in a horizontal line. I chose to use context.rotate which quite obviously rotates the shape round a fixed point.
• And finally you clear the canvas to start again. I discovered this part’s pretty important after getting an infinite amount of bears drawn on top of each other!

However, whilst it’s all very exciting that it moves, it’s just not realistic enough for my liking. So until I can make the bear jump through hoops I’ll keep working on it.