Vintage Code on a New Canvas

I wanted to do a small experiment with the HTML5 Canvas. To do it, I found some Java code I wrote in 2001[1] and ported it to gwt-canvas (thus compiling a Java subset to JavaScript). It uses a naive redrawing technique[2], but the point of this test was not to optimize performance or create production quality code[3].

Anyway, you can see the result here: CanvasPairs (external link). Try it and see how fast you can find all the pairs!

I did this and a few other, more graphically intensive, experiments to test canvas performance on a few devices (iPad, iPhone and Android-based phones mostly) and feasibilty for doing casual games or minigames inside edutainment titles using technology such as PhoneGap with the HTML5 canvas. The results were somewhat mixed, but for the iPad I have high hopes that IOS4 will improve performance in the Safari browser and on even the not-so-new 1.5 version of Android on a medium spec'ed phone, it was relatively impressive.

My feelings about the technology is ambivalent. On one hand I am excited about what will soon be possible to achieve in all browsers without plugins, but on the other hand the maturity feels a bit like Java applets in 1998 or Flash in 2003. At least I am sure progress will be much faster this time around.

[1] - This summer I visited Moet&Chandon and IIRC, 2001 and 2003 where the last years of vintage produced. I won't go as far as saying no good code has been written since 2003 :-), but the reunion with the code from 2001 was not that bad.

Rewriting it in GWT proved to be a little more work than I thought at first, but I am always (too) optimistic... The rewrite included just skipping a few parts (highscore lists, double buffering, keyboard input for pausing etc.) for now and reimplementing others (for instance a basic preloader to replace the ImageObserver and a string drawer based on drawing segments of an image of symbols, since text on canvas seems to be a bit shaky at the time of writing).

[2] - Basically it redraws the whole canvas for each and every frame. While this (minus some background caching, maybe) might be needed for more advanced games, this particular one might have gotten away with a bit of Image or DIV flipping, I guess - but that was not an option for the platform which it was originally developed in 2001.

[3] - One might also argue that the simplicity of the sample would have made it possible to do it without any canvas (HTML, Flash or Applet based) at all. Again, that might be true - but the main point here was not to implement the specific functionality of the game itself.