8 Jun 2010

I’ve been messing around with JavaScript and the new HTML5 canvas element. After a couple of random experiments, I decided that I needed a well-defined goal, and I picked Conway’s Game of Life. Here’s the result:

You'll need to turn on JavaScript (and have a recent, canvas-supporting browser) to see this.

Hopefully, the interface should be relatively self-explanatory (see the Wikipedia page linked above for details of the game itself). The Save button produces a string representing the game board; to go back to a previous state, paste such a string into the box and hit Restore. The whole thing should work in recent versions of Firefox, Chrome, Safari and Opera. It won’t work in IE, as that browser doesn’t support canvas.

Thing’s I’ve learnt in doing this:

  • The interface to canvas works pretty well, and I’ve not (yet) found any major gotchas between the browsers that support it.
  • JavaScript is surprisingly good (and fun) language, especially if you stick to the good parts.
  • JavaScript performance varies noticeably between browsers; in particular, Firefox (3.6) seems slower than the others. My hunch is that the difference is in the optimisation of JavaScript’s somewhat unorthodox handling of arrays - this is something I’ll have to look into.
  • The game works, glacially slowly, on my iPhone 3G, but the editing (which uses onclick) doesn’t. I might fix this.

The code is up on GitHub.

Update: I’ve added this entry as my first “thing” on Flattr. Be gentle with me.

This site is maintained by me, Rob Hague. The opinions here are my own, and not those of my employer or anyone else. You can mail me at, and I'm robhague on Twitter. The site has a full-text RSS feed if you're so inclined.

Body text is set in Georgia or the nearest equivalent. Headings and other non-body text is set in Cooper Hewitt Light. The latter is © 2014 Cooper Hewitt Smithsonian Design Museum, and used under the SIL Open Font License.

All content © Rob Hague 2002-2015, except where otherwise noted.