Canvas要素

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

歴史 Mac OS X v10.4の内部でWebKitコンポーネントとして、DashboardウィジェットやSafariでのアプリケーションを強化するために、2004年Mac OS X TigerのDashboardが標準化へ? - Web Applicationsのドラフト公開 | ネット | マイコミジャーナルにAppleが最初に導入した。後に、Mozilla FirefoxやOperaでも採用され、WHATWGで、新しい標準規格として標準化された。

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

その後、HTML Canvas 2D Context, Level 2 が作られ、2012年12月17日HTML Canvas 2D Context, Level 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を使うと、キャンバスの上に描画できる。

const example = document.querySelector('#example'); const context = example.getContext('2d'); context.fillStyle = "red"; 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のような対応するオブジェクトが存在しないことへの議論もあった。名前空間が存在しないことへの懸念もあったIan Hickson remarks regarding canvas and other Apple extensions to HTML。

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

脚注

Canvas要素

Źródło i licencja