One of the exciting new parts of HTML5 is the canvas element. Using canvas, you can draw bitmap graphics inside the browser window. What's even more impressive and useful is that you can write a program that will draw graphics on the fly inside the browser window.
How does canvas work?
The canvas element creates a container, or canvas, upon which you can draw graphics. A simple example of a canvas element that creates a 300-pixel square drawing area looks like this:
<canvas id="myDrawingArea" width="300" height="300"></canvas>
Once you have the canvas, you must write a script, using JavaScript, to put things inside the drawing area. Images drawn inside a canvas element are very different from the static images that are traditionally used in web pages, where you must create and upload the graphics to the server before the browser loads them into web pages using the img tag.
Images loaded with the img tag can't be changed after they're displayed in the browser. Web developers have some ability to move or resize the images, but if it's a picture of your cat, for example, there's no way to transform it into a picture of your bike.
With graphics, the situation is very different. Because the script is doing the drawing after the web page loads, the graphic can be anything at all, and it can be drawn very fast. canvas works extremely well for drawing charts and graphs, but it can also be used to manipulate photographs in real-time, or even to create animation or work with video files.
Here's a simple example of a JavaScript function that will draw a solid rectangle when used from inside an HTML document:
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
}
}
What is canvas good for?
Because of its ability to manipulate graphics very quickly using programs that can be controlled with user input, canvas graphics are ideal for gaming. Some of the most popular games created with canvas include
Sinuous is a simple, but addictive, game where you control a pointer that you move around to avoid red dots and hit good dots.
Canvas Rider is a beautiful 2D scrolling game where you control a stick figure on a bike, riding over hundreds of user-contributed tracks.
ZTYPE is a game where you must type words as they are falling towards you. As you type the letters in each word, they are shot out of the sky.
canvas is also good for creating graphs and charts that are updated in real-time using live data, or for enabling your users to manipulate graphics over the web.
The potential uses for HTML5 canvas are limited only by your imagination—and by your programming skills, of course.
As of August 2013, the canvas element is supported by most modern browsers, including IE9 (and higher versions), Firefox, Chrome, Opera, and Safari. Please be aware, however, that users running older or less common web browsers will probably be unable to see or interact with canvas-based graphics.