WEBSITE | DESIGN | DEVELOP | CONSULTANCY | FROM ANTHONY, LONDON

Back to Blog

HTML5 CANVAS BIRDS

This project originally started out as a screensaver but as with so many projects it never came to be. But I still think its a cool demo of power and flexibility of canvas in HTML5.

I started off designing a bird that would fly through the sky from left to right and reappear on the left again. I wanted to expand it to handle more then one bird so I developed a bird handler which I'll get into in the following tutorials. Then added posts for them to randomly land on and push the other birds that are still sitting on the post off. Finally added poo as a little detail to finish off the scene.

Flying squence:

Bird 1 Bird 2 Bird 3 Bird 4 Bird 5 Bird 6 Bird 7 Bird 8

Landing squence:

Landing Bird 1 Landing Bird 2 Landing Bird 3 Landing Bird 4 Landing Bird 5 Landing Bird 6 Landing Bird 7 Landing Bird 8 Landing Bird 9 Landing Bird 10 Landing Bird 11 Landing Bird 11