canvas は HTML5 の新要素で、図形を描画するためのキャンバスをサポートします。<canvas>～</canvas> で用意した矩形領域に JavaScript を用いて線や画像を表示します。
Internet Explorer 9以降、Firefox 1.5以降、Safari 1.3以降、Opera 9以降で、平面(2D)コンテキストがサポートされています。
Google が公開した JavaScriptライブラリ 「Explorer Canvas」を用いることで、Internet Explorer 6, 7, 8 でも canvas を VML でシミュレートできます。ブラウザ利用者がプラグインなどをインストールしておく必要は無く、Web製作者側が、JavaScript のライブラリをひとつ読み込ませるだけで実現可能です。多少の制限はあるそうですが、かなり使い物になりそうです。
キャンバスで使用する機能の一覧は下記を参照してください。
<html>
<head>
<title>CANVAS TEST</title>
<!--[if lt IE 9]> // Explorer Canvasを読み込む
<script src="lib/excanvas.js"></script>
<![endif]-->
<script>
window.addEventListener('load', function() {
var cv = document.getElementById('cv1'); // 要素を得る
if (!cv) { return; }
var ct = cv.getContext('2d'); // 2D(平面)コンテキストを得る
if (!ct) { return; }
ct.fillStyle = '#ffcccc';
ct.fillRect(0, 0, cv.width, cv.height); // 矩形を塗りつぶす
ct.strokeStyle = '#ff0000';
ct.strokeRect(0, 0, cv.width, cv.height); // 矩形を描画する
ct.beginPath();
ct.strokeStyle = '#ff0000';
ct.arc(70, 50, 40, 0, Math.PI * 2, false); // 円を描画する
ct.stroke();
ct.beginPath();
ct.strokeStyle = '#0000ff';
ct.moveTo(0, 0);
ct.lineTo(140, 100); // 線を描画する
ct.stroke();
});
</script>
</head>
<body>
<canvas id="cv1" width="140" height="100"></canvas>
</body>
</html>
// キャンバス要素を得る
cv = document.getElementById(id);
// 2Dコンテキストを得る
ct = cv.getContext('2d');
// 描画を開始する
ct.beginPath();
// 描画した結果を表示する
ct.stroke();
// 線の色を設定する
ct.strokeStyle = '#ff0000';
// 塗りつぶしの色を設定する
ct.fillStyle = '#ff0000';
// ペンの位置を移動させる
ct.moveTo(x, y);
// 現在のペン位置を起点に線をひく
ct.lineTo(x, y);
// 矩形を描画する (beginPath()/stroke()は不要)
ct.strokeRect(x, y, w, h);
// 矩形を塗り潰す (beginPath()/stroke()は不要)
ct.fillRect(x, y, w, h);