Spurred on by the excitement of the HTML5 canvas hack night, I decided to put together something of my own using canvas and generally have a good play around with it all, and throw in a few extra new-and-shiny goodies such as audio.

I hereby present to you: Canvas Circles. Yes I know, imaginative name isn't it!

What Is It?

Basically what I've done here is (accidentally) created something really quite hypnotic, but somewhat addictive at the same time. In addition to playing around with canvas, I decided to throw in a bit of audio using HTML5's new <audio> element - I really think it adds to the experience. The circles are all semi-transparent, and grow out from the centre until they fade away at the edge, constantly being replaced by new ones growing out again from the centre. This is all accompanied by a random choice of music from a selection of creative-commons licensed tracks. If you like what it plays, do click on the credit in the bottom-right corner of the screen and check out their work.

Good Browsers Only

Since this is all rather cutting-edge stuff at the moment, you will need a decent browser to run it all. Any of the latest versions of Chrome, Firefox or Safari should do, as would IE 9 (and probably Opera too). Feel free to try it on your iPhone as well (it does work, albeit rather slowly).

For the audio, it first of all asks the browser whether it's going to be able to handle an Ogg Vorbis file. If this looks like a goer, it'll use the .ogg version. If not, it falls back to an MP3. Between the two formats, this should have all audio-capable browsers covered.

Feel free to have a look at the code for yourself — it currently lives in my 'experimental' repo up on github.

Where Is This Going?

As I've pointed out, my canvas circles serve no purpose at all (apart from possibly hypnotising people or perhaps lulling them to sleep), but it does show what browsers are becoming and what we can do right now just with some HTML and JavaScript. Gone are the days where you slap a few words and images together and call it a website — now we can do all sorts in the browser. Where do we go from here... well I'd say the possibilities are endless.

If you want to learn more about HTML5 canvas, check out Rob Hawkes' slides from the hack night and will give you a great overview of what canvas is all about.