HTML5のCanvas要素テスト
Canvas要素は、Webブラウザ上に配置してJavaScriptからグラフィック描画を行うためのHTML要素です。現在策定と実装が進められているHTML5の中でも、特に注目を集める新機能ですね。
これまでWebブラウザ上で「プログラムによるグラフィック描画」を行う場合は、FLASHやJavaアプレットなどの拡張プラグインに頼ってきました。しかし、HTML5の実装が進みCanvasが普及すれば、HTMLとJavaScriptという「標準」機能の枠組みで動的なグラフィックを扱えるようになります。
この場合、CanvasはWebページ（DOM）内にあるHTML要素になりますから、Webページ内の他のHTML要素との連携もしやすくなるでしょう。わかりやすいグラフィカルなGUIの実現に威力を発揮しそうですね。
まずは、このCanvas要素を実際に配置しJavaScriptから描画を行う流れを確認してみることにしましょう。
Canvas要素は、スクリプトから扱うことを前提としているので、タグの記述自体はごく単純です。Canvasタグの属性としてサイズやスクリプトで操作するための名前（ID）を指定すれば、利用できるようになります。
<canvas id="test_canvas" width="300" height="300"></canvas>とすると、test_canvasというIDを持つ300*300ピクセルのCanvas要素になります。
タグの間にテキストなどを入れておくと、Canvas要素に未対応のWebブラウザではそちらが表示されるようになるので、代替となる説明やCanvas対応ブラウザでの閲覧を促すメッセージを入れておくのも良いかもしれません。
JavaScriptからCanvasの描画機能にアクセスするには、まずgetElementById()などドキュメント内の要素の参照を取得するメソッドでCanvasの参照を取得し、getContext()メソッドでグラフィック処理を行うためのコンテキストを取得します。
コンテキストを取得したら、そのコンテキストを通して各種メソッドで図形を描いたり画像を読み込んで表示したりといったグラフィック処理を行えるようになります。ただし、画像などリソースを描画する場合は、読み込み／作成が完了した状態で行う必要があるので注意が必要です。
簡単なテストとして、300*300ピクセルのCanvasを配置しその中に青い正方形を描くHTMLを書いてみましょう。まずCanvasタグを記述し、その下に「Canvasのコンテキストを取得して描画色を設定、高さと幅を指定し長方形を描く」JavaScriptを記述します。
Canvasタグの前にそのCanvasを参照するJavaScriptを持ってくるなど「JavaScritからCanvasが見えない」状態で参照しようとするとエラーになるので、注意が必要です。
<!DOCTYPE html>
<html>
<body>
<canvas id="test_canvas" width="300" height="300"></canvas>
<script type="text/javascript">
var elm = document.getElementById('test_canvas');
context = elm.getContext('2d');
context.strokeStyle = '#0000cc';
context.strokeRect(10, 10, 290, 290);
</script>
</body>
</html>このHTMLをCanvas対応のWebブラウザで開くと、実際に正方形が表示されるはずです。
以上がCanvasを配置し、描画用のコンテキストを取得してAPIによる描画を行う流れになります。Canvasには図形や画像描画、ピクセル操作など多様なAPIが用意されているので、順次試してみることにしましょう。