A 3D Exploration of the HTML Canvas Element

ector graphics abound on the web, and they come in a variety of formats, including Flash and SVG. HTML Canvas, one of the newer incarnations, occupies a different niche from other vector graphics systems. While SVG is a declarative graphics file format that can be rendered by any kind of program and Flash is built around a complete multimedia system (including browser plug-in libraries, the ActionScript scripting language, and content-creation tools), HTML Canvas is HTML. In fact, HTML Canvas is part of the upcoming HTML 5 specification. As such, the HTML Canvas is integrated into the DOM tree, which means it can be accessed from JavaScript. Thus, the HTML Canvas allows you to do many of the things that Flash and SVG renderers can do.

The HTML Canvas bridges the gap between HTML markup and individual pixels. It allows you to efficiently draw arbitrary graphics at the level of individual drawing primitives or even at the level of individual pixels. And it lets you do it right from JavaScript.

This article describes the implementation of a simple 3D game using the HTML Canvas (HC). HC currently is designed for 2D graphics, but in the end, 3D graphics are rendered as 2D graphics, so HC is fine for 3D as well. And, because HC is implemented natively, you can get a pretty decent frame rate. (Click here to download the source code for the 3D game.)

To begin, the following section goes over the basics of setting up, drawing, and using an HC.