Has anyone got a basic example of HTML5 <canvas> animation?

Question

I am looking for a basic example of HTML5 <canvas> animation. For example, making a ball bounce, etc.

If someone has one I would be very grateful.

Answer 1

Here’s a (very) basic bouncing ball animation example:

• http://html5.litten.com/simple-animation-in-the-html5-canvas-element/

Here’s a less basic example: a <canvas> cartoon:

• http://www.canvasdemos.com/2009/10/09/html-5-canvas-animation/

There’s a tutorial over at Mozilla too, which includes an explanation of basic animation:

• https://developer.mozilla.org/En/Canvas_tutorial

I think <canvas> is just a drawing surface, rather than something that has any animation capabilities built in. So I think you’re going to have to do a lot of the heavy lifting yourself (with the caveat that I don’t know anything about animation, so I don’t know which bits qualify as heavy lifting).