HTML5 Graphics

I'll warn you in advance, rather than my usual game or TV review I'm going to get a little technical today. In my quest for a new programming project I started researching what HTML5 had to offer. With the release of IE9 right around the corner the option of HTML5 content is going to be much more available to the masses. Sure you can do some things now in IE7 & 8 but it requires plugins and such. Once IE has it's own native support it's going to start to become more popular among developers and more known by the general public. I've seen some pretty nifty things done using HTML5 and the new Canvas tag but they're still a small niche as over 50% of Internet users are still using Internet Explorer and can't run it correctly. At least IE6 is finally dieing!

Now you wouldn't have to read my blog for long to realize I have a huge interest in games, both the computer and board variety. I used to program my own games but that was over ten years ago. Now it's almost impossible for one person to have all the necessary skills to create a game on their own. Programming teams have gotten bigger and bigger and there's no sign of it stopping. That's why I started working on mods and maps instead but even that is beginning to be done by teams. I could probably have a nice place on an indie dev team somewhere but as usual I have the problem of time. I wouldn't be able to guarantee my availability which wouldn't be fair.

So what is the HTML5 canvas? It's a graphics display which can be embedded in web pages and controlled by scripting. This allows for dynamic graphics and animations without the need for additional plugins such as flash. It's functionally it quite basic and I guess it's been designed with things like graphs in mind. However that basic level is what has drawn me to it. You can get right down to a pixel level and program things however you desire. I'm liking it's potential so far and see some people have already done great things with it, including a version of FreeCiv! Some people will work with a framework system but I'm looking to write my own framework (which I might release separately).

I'm a little rusty when it come to writing Javascript but with some help from Google it's been coming back. What surprised me the most was how much it felt like I jumped back 15 years and was programming in Pascal again. The syntax is different but the concepts are the same. Pixels, rectangles, lines & back-buffers are all things I've done a lot with in the past. In fact the examples I'm going to get to next are all programs I've done before when I was first learning to write graphics for DOS. It didn't take as long this time though!

I've uploaded a few of my first tests for you to look at. You'll need the latest FireFox, Chrome or Safari (or IE9 Beta) to run them. All are pretty basic but are designed to give an idea of capabilities and performance.

Colours
Simple pixel manipulation or technically mini rectangles. Lots of randomly coloured dots appear on the screen. People always seem to need more dots ;)

Colours 2
A variation on the first example except the colours only change at one point and then that point random moves up, down, left or right.

Boxes
Some bouncing boxes. I added form to this one so you can update the number of boxes on screen. What's interesting here is my main work PC (P4 3GHz, 2GB RAM, WinXP) starts to struggle to keep up at around 50 boxes. Whereas my gaming rig (Core2Quad 2.8GHz, 4GB RAM, Win7) can run around 800 smoothly (Both tests in FireFox 3.6.10).

Starfield
Finally a scrolling parallax starfield also with editable options. One day I might have a space battle in front of this.

The ideas are starting to come now. I'm sure I'll post on this subject again in the future. The next tests will be about direct mouse and keyboard interaction.