Canvassing HTML 5

As I am sure most people who read this already know, HTML is the file format that Internet browsers use. While it is certainly possible to create a web site in php, perl, python, jsp, or a myriad of other server-side languages; these languages ultimately send an HTML file to the browser. HTML 5 is currently a draft standard, which means it is still being developed. In fact, it probably won't be an official standard until 2012 so my starting to use HTML 5 might seem strange. I had planned to stick with Flash/Flex which requires a proprietary plug-in to work but is very widespread. Apple, Google, Opera, and Mozilla are pushing for the new standard and have support for many of the features already. Notice that Microsoft is absent from this list. While I personally don't like Internet Explorer, it is very commonly used. Thankfully, a lot of the HTML 5 features that are not supported directly by Microsoft have had open source implementations so it is possible to use these features. When I discovered ExplorerCanvas (http://excanvas.sourceforge.net/) last year, I figured it was time to start playing with HTML 5, or at least the canvas portion of the upcoming standard.

I remember how excited I was going to Star Wars Episode 1. I had seen the other Star Wars movies many times and was thrilled that a new Star Wars movie was finally coming out. While Episode 1 was not as bad as many old-school Star Wars fans claim, it certainly did not meet my overly-high expectations. This is the way I feel about the canvas tag. For general purpose drawing, it is really good. From a game developers perspective, however, it is lacking. The biggest flaw is there does not appear to be double buffering support. While it is possible to create off-screen buffers of pixels which let you manipulate each pixel individually, these buffers are glorified arrays and don't have any advanced drawing support. In most animated applications you do not want people seeing the frame being drawn which is why double buffering is used. Still, there are a number of ways around this problem so all is not lost.

I have not played around with this idea,  but one way to emulate a double buffer would be to simply have a hidden canvas that all the drawing is done to and then the contents of that canvas get copied over to the visible canvas.  I have heard of tricks like this being used before, and it would be a simple solution if it can be implemented in a cross-browser compatible way. Dirty rectangle algorithms could also be used, especially since there is really good clipping support built into the canvas class. I suppose writing some low level per-pixel drawing methods and doing the drawing inside the ImageData objects would work, but JavaScript is really slow so I can't see this being a good solution unless your game already has to do a lot of per-pixel work. A raycaster come to my mind immediately. Sadly, I suspect that flicker will be a part of a lot of future HTML 5 games, but computers are very fast now so lets hope this is one thing I am proven wrong about.