HTML started life as a way to format a static page. Animated GIF images and flashing text was about as dynamic as HTML could be. JavaScript changed all that by allowing web pages to be dynamically modified, and many web servies now make use of AJAX to create web pages that give the user a more seamless experience than the standard "click, reload page, click" procedure that is so often involved with standard HTML pages.
Unfortunately JavaScript is somewhat limited by the functionality of the web browser that hosts it. While you can create and modify any element in a web page, JavaScript doesn't (easily) allow the host web browser to display a new type of object. JavaScript can modify some text, insert an image or resize a table with ease because these element are already supported in HTML. But what if you want to do something fancy, like create a game? At best you'd be looking at a frustrating time spent trying to manipulate standard HTML elements in ways that they were never meant to be used. Or, you would use a plugin like Flash or Silverlight.
Enter the canvas element. This new HTML element provides a way for JavaScript developers to paint directly onto a web page, without the need for an additional plugin. It was first introduced by Apple in its WebKit framework, and used by the Safari web browser and Dashboard widgets. The canvas element is currently being proposed as part of HTML 5, and is supported now by most web browsers like Chrome, Firefox, Opera and Konqueror. Internet Explorer (at least up to version 8) is the notable exception, although projects like ExplorerCanvas do provide some of the functionality of the canvas element for IE.
Anyone who has done 2D graphics programming will find the canvas element quite easy to use. You can draw lines, shapes, gradients and even modify individual pixels using functions that are very similar to most other 2D API's. And thanks to the performance of the latest JavaScript engines like Chrome's V8, Firefox's SpiderMonkey and Safari's Nitro creating detailed and interactive web applications is quite feasible.
This series will show you how to create a simple platformer game using JavaScript and the canvas element. It will cover topics like animation, resource loading, layered rendering, scrolling and interaction. With step by step examples with code and live demos for you to play with you'll be able to master the power of the canvas element for yourself.
Read more in the Game Development with JavaScript and the Canvas element series.
