Hey everyone!

I just released a Canvas-based game through WiiCade.com. Thought everyone here might find it interesting:

http://www.wiicade.com/gameDetail.aspx?gameID=1317

The game works on both the PC and the Wii. It automatically adapts the controls to match the system you're using. Here are some of my notes from development:

• Because Canvas acts as a dynamic image rather than a drawing surface, a dirty-rectangle algorithm can provide better performance under certain circumstances.
  
  
• Screen wipes and dissolves are easy to achieve with Canvas by making use of the clipping and globalAlpha facilities respectively. Such effects can even be performed on animated content if the before and after images are drawn together in the same frame. Since clipping can be an arbitrary shape, it's easy to do a vertical wipe, horizontal wipe, diagonal wipe, iris wipe, or other shaped effects. Depending on the circumstance, these wipes and dissolves can be a lot more pleasing than a smash cut. In addition, they can convey information about situational changes. (e.g. If you have only one Wii Remote and connect another, a dissolve is used to convey the information that the control scheme has changed.  A smash cut does not make it clear that the screen has changed. If the user blinks, they may not even see the change.)
  
  
• Oddly, the dissolve that's supposed to happen when the user selects "New Game" doesn't occur in Chrome. This may be an issue with Webkit's alpha compositing features. I'll have to look into this further when I get a chance and understand what's going on.
  
  
• Even though I have a Java-based canvas adapter which could be finished to provide canvas support in IE, I felt it was more advantageous to simply redirect IE users to an "upgrade your web browser" page. Lack of canvas support is far from IE's only problem. Lack of basic features like DOM2 events is a royal pain, even if they can be worked around. Given that only about 35% of our visitors use IE, I felt that it was more useful to encourage upgrades to a modern browser rather than continuing to support Microsoft's out-of-date cruft.
  
  
• A wonderful feature of Canvas is that the image size in CSS can be different from the image size set on the Canvas element. The browser automatically renders to the size in the canvas element, then scales the canvas frames to the size in the CSS descriptor. This basically provides a free method of scaling to any screen size. (The actual image size is 280x192 and is scaled to fill the screen on the Wii. On the PC, it's scaled to 700x480.)
  
  
• While the lack of text is a pain, it was not an issue in this case. Using a bitmap font was fairly easy and gave the "classic gaming" feel that I was looking for. Had I tried to use text rendering, it's likely that scalable fonts would have provided inferior results at such a low resolution. Even if they had looked acceptable, I've often noticed that font rendering differences can create sizing issues from OS to OS.
  

Hope everyone finds this information interesting and useful! :)

Thanks,

Jerason Banes