Canvas とは、Web ページに JavaScript を使って図を描画するためのテクノロジーです。これまで、Web ページに図を表示するためには、静的な図であれば img 要素を、短いアニメーションであればアニメーション GIF などのアニメーションに対応した画像フォーマットを使ってきました。また、複雑な図を動的に描画したい場合は、Flash などのプラグインに頼らざるを得ませんでした。
Canvas は、動的なイメージを表現できる Web 標準のテクノロジーとなります。これまで Flash などのプラグインに頼らざるを得なかったビジュアル表現を、JavaScript だけで実現できるようになります。
Canvas は、HTML5 が新たに規定した API の中でも、最も古くからブラウザに実装された API の 1つです。Canvas は、Firefox 1.5、Opera 9.0、Safari 1.3、Chrome 1.0 から実装されています。また、iPhone や iPad に組み込まれている Safari にも実装されています。しかし、残念ながら、最もブラウザ・シェアが高い Internet Explorer が Canvas を実装していなかったこともあり、実際のウェブ・サイトでの Canvas の利用は限定的でした。ところが、次期バージョンの Internet Explorer 9 に Canvas が実装されたため、Internet Explorer 9 が正式リリースした後、一般的なウェブ・サイトでの Canvas の利用が進むことでしょう。
未対応の Internet Explorer でも、canvas 要素をエミュレートする JavaScript ライブラリ「 ExplorerCanvas 」を使うことで、Internet Explorer にも canvas 要素が実装されているかのように、canvas 要素を利用することが可能となります。
また、Apple 社が提供している iPhone や iPad では Flash が組み込まれませんでした。そのため、iPhone や iPad 向けのウェブ・サイトやウェブ・アプリケーションにおいて、動的に図を描画するためには、Canvas を利用するしかないのが実情です。このように、Canvas は、今後ますますウェブにとって重要なテクノロジーになっていくことは間違いありません。
Canvas には、Canvas ならではの特徴があります。その利点を活かすためにも、その特徴を十分に理解し、適切なシーンで利用するようにしましょう。
図を描くテクノロジーとして旧来より SVG というテクノロジーがありました。Canvas によって描かれる図は、ビットマップ・グラフィックスです。それに対して SVG はベクター・グラフィックスと呼ばれ、その特徴は大きく異なります。
SVG に代表されるベクター・グラフィックスをベースとしたテクノロジーでは、図形を描いた後からも、JavaScript からそれをオブジェクトとして認識することが可能です可能です。実際に、SVG は XML 形式のマークアップで表現するためのテクノロジーですから、ブラウザ内部では、HTML と同様に、DOM ツリーを構成しています。そのため、図を描いた後に、描かれた個々のパーツを JavaScript から操作することが可能なのです。例えば、特定のパーツだけを指定して、その色を変えたり大きさを変えたり位置を変更することができるのです。
一方、Canvas は、ビットマップ・グラフィックスであるゆえに、前述の SVG の利点を全く活かすことができません。Canvas は、図を描いてしまったら、個々のパーツを認識することはできません。Canvas で認識できるのは、Canvas 領域に描かれたピクセル単位の色情報だけです。それが円だとか四角であるといったパーツの情報を一切保持しないのです。Canvas では、テキストを描くこともできますが、そのテキストですら、描いてしまった後はテキストとして認識できません。
Canvas は SVG と比べて劣っているように感じるかもしれませんが、そもそも用途が違うと考えたほうが良いでしょう。もちろん、Canvas には、SVG にない利点があります。
まず、描画が高速である点です。Canvas は、描いた図形を個々に認識しないため、ブラウザ内部では、それを描く処理を担うだけで済みます。SVG のように DOM を構成する必要もありません。描画が高速であるゆえに、アニメーションに効果的です。
描いた図形の一部だけを動かすといった簡単なアニメーションであれば、SVG の方が扱いやすいといえます。しかし、画面全体を塗り替えてしまうようなアニメーションは、SVG では非常に不効率です。Canvas であれば、1コマずつ全体を塗り替えたとしても、ブラウザはストレスなく描画してくれます。つまり、映画のフィルムのように、映像のコマを 1つずつ JavaScript から作り出し、それを連続して描画するのです。通常、このような操作はパフォーマンスの観点から無理があると倦厭されがちです。ところが、Canvas では予想に反して、全く問題なく動いてしまいます。
Canvas のもう 1つの利点は、ピクセル操作ができる点です。Canvas はビットマップ・グラフィックスであるゆえ、Canvas 上のイメージのピクセル情報を JavaScript から操作できるのです。ピクセル情報とは、色の情報を表します。これは SVG ではできません。
例えば、Canvas では、img 要素で組み込まれた画像や、video 要素で組み込まれたビデオの 1コマを組み込むことが可能です。そして、Canvas に組み込んだイメージを加工することができます。これについては、詳しくは別ページで説明予定です。
このように、Canvas と SVG は、その特徴が全く異なりますので、利用する際には、その利点を十分に検討した上で、適切なテクノロジーを採用するようにしましょう。
Canvas は、当初は HTML5 仕様に全て記載されていました。しかし現在は canvas 要素の仕様だけが HTML5 仕様に残され、それ以外の API に関する仕様については、別の仕様書として分離されました。
現在は、二次元の図を描画するために規定された 2D Context のみが仕様化されていますが、将来的には 3D も視野に入れられています。