Ajaxian

Ajaxianの記事Real World Canvas Tips from Hakim El HattabにおいてHakim El Hattab氏が掲載している記事Thoughts on HTML5 Canvasが紹介されている。これまでFlashを使ってきたデベロッパがHTML5のCanvasを使い始めてからの考察をまとめたもので、これからCanvasを使おうとしているデベロッパにとって参考になる内容がまとまっている。Hakim El Hattab氏が紹介している項目は次のとおり。

1. ブラウザ互換性 - 正しいJavaScriptコードを記述している限り、Canvas要素における出力にブラウザ間の差異はみられない。ただしコーディングが誤っている場合、ブラウザが対処を試みる結果、それぞれ違った結果になることはある。
2. パフォーマンス - ビットマップ操作は重い処理であるため、特に高い解像度におけるアニメーション処理などは注意する必要がある。最適化のポイントは可能なかぎりピクセルを使い回し、必要な部分だけを書き換えるようにすること。必要なピクセルだけをclearRect(x,y,w,h)でクリアして再描画する。Flashの再描画と異なり、Canvasではこうした操作は手動で完了させる必要がある。
3. トランスフォーム - Canvasでは回転やスケーリングといったトランスフォーム処理を実施できる。ここで重要なのはsaveとrestoreという2つの方法が提供されていることを理解することにある。一旦状態を保存し、保存した状態からトランスフォーム処理を実施することで複数のトランスフォーム処理が実施できる仕組みになっている。
4. コンポージットモード - Canvasにおける強力で扱いやすい機能のひとつにコンポージットモードがある。コンポージットモードを使うことでマスクやレイヤの機能を実現できる。
5. アンチエリアジング - すべてのブラウザはCanvasにおけるアンチエリアジング描画機能を提供している。この機能があるおかげで線がカクカクにならずに綺麗に描画される。ただし、アンチエリアジングを回避する方法も用意されている。
6. クリア - Canvasのクリアには通常clearRect(x,y,w,h)を使うが、ほかにも方法がある。Canvasの幅と高さを設定すると、たとえ現在の長さと同一である場合でも、Canvasはリセットされる。動的にサイズが変わるCanvasを使っている場合、Canvasのサイズを変更すると中身が消えてしまうのはこのため。

Hakim El Hattab氏はすべての最新ブラウザと一部の従来からあるブラウザでCanvasがすでにサポートされており、本番環境における採用へ向けた条件は整いつつあると説明。Canvasの活用シーンとしてはよりリッチなボタンの実現、グラフなどのレンダリング、画像ギャラリーのサムネールリストのようなナビゲーションUIの実現などがあげられている。