Canvas is the part of HTML5 that lets developers create 2D animations — you can draw polygons on the screen, then manipulate them with JavaScript, or the mouse and keyboard (usually both). It’s one of the technologies that intrepid web authors are using to replace Flash for simple animations and games like this one. Granted, Canvas has a long way to go before it can replicate what’s possible today in a Flash game, but we’re seeing the baby steps happen. And as browsers get faster, the baby’s stride grows.

Originally developed by Apple, Canvas is now part of the HTML5 draft specification and is supported by most major browsers. IE8 is lacking native support (it works with this add-on) but IE9 will fix that when it reaches the beta stage later this month.

Kevin’s demo has been around for a couple of months, but we’re revisiting it because the author has taken the original code and created a brand new Canvas benchmark tool to test how quickly and smoothly your browser can render HTML5 animations. Run his new test code and you’ll see a game simulation with more asteroids than your browser can handle.

Also, when playing the actual game, you can recreate this effect by pressing the “A” key as you fly around. This adds new asteroids to the playing field, so you can test your browser and your skills.

This article originally appeared on Webmonkey.com, Wired’s site for all things web development, browsers, and web apps. Follow Webmonkey on Twitter.

See Also:

• Play Pac-Man in HTML5
• Google Shows Off Its Bouncy Balls
• Tips and Tricks for Better HTML5 Canvas Animations
• Who Needs Flash?
• Turn Your Vector Art Into Canvas-based Animations With Opacity

Authors: Michael Calore

to know more click here