Canvas要素

HTML
各種項目 HTML ダイナミックHTML HTML5 audio要素 canvas要素 video要素 XHTML Mobile Profile C-HTML HTML要素 HTMLフレーム（英語版） HTML エディター 文字符号化（英語版） Unicode（英語版） Document Object Model スタイルシート（CSS） フォントファミリー（英語版） ウェブカラー HTMLスクリプティング（英語版） JavaScript WebGL WebCL W3C（バリデータ） WHATWG 後方互換モード（英語版） ウェブストレージ レンダリングエンジン
比較 マークアップ言語（英語版） HTML（英語版） XHTML（英語版）
表 話 編 歴

canvas要素（キャンバスようそ、英: canvas element）とは、HTML5以降のHTMLの一部で、動的な2次元ビットマップ画像の描画のためのHTML要素。

歴史

Mac OS X v10.4の内部でWebKitコンポーネントとして、DashboardウィジェットやSafariでのアプリケーションを強化するために、2004年^[1]にAppleが最初に導入した。後に、Mozilla FirefoxやOperaでも採用され、WHATWGで、新しい標準規格として標準化された。

2009年の夏頃に、文字列描画のAPIとピクセル操作のAPIが追加になり、ウェブブラウザに実装された。

その後、HTML Canvas 2D Context, Level 2 が作られ、2012年12月17日^[2]に最初の W3C Working Draft が発表になった。imageSmoothingEnabled により画像のスムージングを無効に出来たり、CanvasWindingRule が指定できるようになったり、破線が描画できるようになった。

利用法

canvas要素には、widthとheightという属性があり、HTML内での描画可能な領域となる。JavaScriptのコードにより、その領域内に他の一般的な2次元APIと似たAPIを通じて描画ができる。これにより、動的にグラフィックスを生成できる。期待されている利用法としては、ゲーム、アニメーション、グラフ作成、画像構築などを含む。

APIは状態管理、変形、合成、色とスタイル、ラインキャップと接合、影、長方形、パス、フォーカス管理、文字列、ピクセル操作、画像への変換などから構成されている。

例

以下のコードは、HTMLページにcanvas要素を作成する。

<canvas id="example" width="200" height="200">
HTML5のCanvas要素に対応していないブラウザでは、この文章が表示される。
</canvas>

JavaScriptを使うと、キャンバスの上に描画できる。

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);

上記のコードはスクリーン上に赤い長方形を描画する。

実装

Internet Explorer 9、Mozilla Firefox、Google Chrome、Safari、Opera、NetFront など全ての主要ブラウザの最新版で実装されている。Internet Explorer 8やそれ以前ではネイティブ実装されていないが、それをサポートするための外部ライブラリがある。

古いInternet Explorer対応

• ExplorerCanvas - VML
• FlashCanvas Pro - Adobe Flash
• uuCanvas.js - Flash, Silverlight, VML

反応

canvas要素の導入に当たり、Webの標準化コミュニティからは様々な反応があった。SVGをサポートする代わりに、新しい要素を導入するというAppleの決定に議論があった（現在は、canvas要素もSVGも両方対応している）。また、canvasがピクセル単位の描画のため、DOMのような対応するオブジェクトが存在しないことへの議論もあった。名前空間が存在しないことへの懸念もあった^[3]。

知的財産

2007年3月14日、WebKit の開発者の Dave Hyatt が Apple の Senior Patent Counsel の Helene Plotka Workman からのメールを転送した^[4]。それには、Apple は WHATWG の 「Graphics: The bitmap canvas」というタイトルのついた、Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1^[5] に記載されている項目の知的財産を所有しているが、公式な特許ポリシーに基づき、標準団体に特許を譲渡する用意があると書かれている。これは、ウェブ開発者の間で議論を起こし、W3Cがロイヤリティーフリーの特許を明示的に好むのに対して、WHATWG がそのような特許ポリシーを持っていないことに対する疑問が生じた。後に、Appleは W3C のロイヤリティーフリーの特許条項に従う形で特許を開放した^[6]。この開放は、canvas要素がHTMLワーキンググループにより作成された将来の W3C の勧告仕様の一部となっても、Apple はロイヤリティーフリーのライセンスを特許に対して提供する必要があることを意味する^[7]。

脚注

関連項目

• SVG
• WebGL

外部リンク

仕様書

• 4.12.5 The canvas element — HTML5 (including next generation additions still in development) - WHATWG
• HTML Canvas 2D Context - W3C
• HTML Canvas 2D Context, Level 2 - W3C

ウェブブラウザ側の解説

• Canvas - MDN
• Mac Dev Center: WebKit DOM Programming Topics: Using the Canvas
• HTML5 canvas - the basics - Dev.Opera