canvasタグは、Webページ内に埋め込むことのできるグラフィック要素で、JavaScriptを用いて自由に図形や画像の描画を行える。

Internet Explorer以外のブラウザではすでにサポートされている。また、explorercanvasというライブラリを使用すれば、Internet Explorerでもcanvasをエミュレートすることができる。

canvasを使用するには、まず幅(width属性)と高さ(height属性)を指定してcanvasタグを指定する必要がある。またcanvasタグ内には、canvasをサポートしていないブラウザで閲覧された際に表示する代替コンテンツを記述することができる。 

<canvas id="canvas1" width="300" height="300">
  このページを正しく表示するにはcanvas要素をサポートしたブラウザが必要です。
</canvas>

上のコードだけでは、キャンバスを配置しただけで何も表示されない。キャンバスにグラフィックを描画するには、canvasのDOMオブジェクトが持つgetContext()メソッドを呼び出し、描画コンテキストを取得する必要がある。 

// 描画コンテキストの取得
var ctx = document.getElementById("canvas1").getContext("2d");

描画コンテキストは、矩形や円、線、テキスト、画像などを描画するメソッドを持つほか、回転や変形などの変換操作を行うこともできる。

以下の例は、画像描画(drawImageメソッド)と座標変換(transformメソッド)を用いて、画像の鏡像を作成する例だ。drawImageを用いて画像を描画するためには、対象画像のロードが完了している必要があるため、Imageオブジェクトのonloadイベントを捕捉して処理を行っている。

リスト canvas.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init() {
    // img要素を作成
    var image = document.createElement("img");
    // 画像の読み込みが完了したら
    image.onload = function() {
        var canvas = document.getElementById("canvas1");
        // 描画コンテキストを取得
        var ctx = canvas.getContext("2d");
        // 画像を描画
        ctx.drawImage(image, 0, 0);
        // 画像を半透明にし、画像を反転させて描画
        ctx.globalAlpha = .1;
        ctx.transform(1, 0, 0, -1, 0, image.height * 2);
        ctx.drawImage(image, 0, 0);
    };
    // 画像のURLをセットし、読み込み開始
    image.src = "http://journal.mycom.co.jp/images/ci_mycomjournal.gif";
}
</script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="500">
</canvas>
</body>
</html>

実行結果

canvasについては多くのブラウザが実装済みなこともあり、良質なチュートリアルが数多く存在する。Mozillaのチュートリアルや、HTML5.jpのチュートリアルがお薦めだ。