Canvas Demos

Recently I’ve been having some fun with the HTML 5 canvas, using Javascript for simple animations. Below are a sample of the fruits of my labours.

Tutorial – Gabi Bubbles

What started as a quick attempt to make a bubble-popping game for my two year-old son turned into a journey of discovery as I ran into obstacle after obstacle. So once I was done I decided to spare others my problems and put the whole adventure down into a tutorial.

The final version can be found here: Gabi Bubbles.

HTML5 Bubbles Page 0


A bit of background, a description of the project and what we aim to get out of it.

HTML5 Bubbles Page 1

Part 1: Getting Started

The first stage is to put together a core framework, something not trivial for beginners. Here we make use of the Revealing Module pattern and finish with a gradient background, just so we can actually see something.

HTML5 Bubbles Page 2

Part 2: Getting Animated

A background is nice but wouldn’t some animation be better? I thought so too, so in this part we look into the rendering loop and actually put some bubbles on screen.

HTML5 Bubbles Page 3

Part 3: Getting Touchy

Now we have bubbles, let’s make it a game. That means interactivity, which means mouse input. But since this is the future it also means touchscreen input which is far more fraught with tricksy issues.

HTML5 Bubbles Page 4

Part 4: Getting Noisy

What use is popping bubbles if you can’t hear them expire? In this part we add sound effects to the game, which is far trickier than it has any right to be.

Standalone Projects


Wilson’s Algorithm

I don’t know who Wilson is but his algorithm for generating a uniform spanning tree using loop-erased random walks is fascinating and rather pretty.

Conways Game of Life

Conway’s Game of Life

Cellular automata are endlessly fascinating and thanks to its simple rules Conway’s Game of Life is easy to implement in pretty much every language. There’s even a Minecraft version, which I have to admit makes my Javasript implementation look a little basic. Still, fun.

Loading Animations

This all started when I discovered r/loadingicon, a home on Reddit for simple closed-loop gifs that might look good as a loading screen or icon.



The first canvas animation I made. A simple bouncing ball with some reactive scenery. The canvas animation equivalent of “hello world”.



A bit of an experiment that turned out well while I worked on the next one.



More of a loading screen than anything else I’ve made so far. The timing was a devil to work out and I could have spent hours tweaking it. This one I could watch for ages without getting bored.



A minor variation on the last one, with alternating bands rotating in opposite directions.

Leave a Reply