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（英語版）

.mw-parser-output .hlist ul,.mw-parser-output .hlist ol{padding-left:0}.mw-parser-output .hlist li,.mw-parser-output .hlist dd,.mw-parser-output .hlist dt{margin-right:0;display:inline-block;white-space:nowrap}.mw-parser-output .hlist dt:after,.mw-parser-output .hlist dd:after,.mw-parser-output .hlist li:after{white-space:normal}.mw-parser-output .hlist li:after,.mw-parser-output .hlist dd:after{content:" ・\a0 ";font-weight:bold}.mw-parser-output .hlist dt:after{content:": "}.mw-parser-output .hlist-pipe dd:after,.mw-parser-output .hlist-pipe li:after{content:" |\a0 ";font-weight:normal}.mw-parser-output .hlist-hyphen dd:after,.mw-parser-output .hlist-hyphen li:after{content:" -\a0 ";font-weight:normal}.mw-parser-output .hlist-comma dd:after,.mw-parser-output .hlist-comma li:after{content:"、";font-weight:normal}.mw-parser-output .hlist-slash dd:after,.mw-parser-output .hlist-slash li:after{content:" /\a0 ";font-weight:normal}.mw-parser-output .hlist dd:last-child:after,.mw-parser-output .hlist dt:last-child:after,.mw-parser-output .hlist li:last-child:after{content:none}.mw-parser-output .hlist dd dd:first-child:before,.mw-parser-output .hlist dd dt:first-child:before,.mw-parser-output .hlist dd li:first-child:before,.mw-parser-output .hlist dt dd:first-child:before,.mw-parser-output .hlist dt dt:first-child:before,.mw-parser-output .hlist dt li:first-child:before,.mw-parser-output .hlist li dd:first-child:before,.mw-parser-output .hlist li dt:first-child:before,.mw-parser-output .hlist li li:first-child:before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child:after,.mw-parser-output .hlist dd dt:last-child:after,.mw-parser-output .hlist dd li:last-child:after,.mw-parser-output .hlist dt dd:last-child:after,.mw-parser-output .hlist dt dt:last-child:after,.mw-parser-output .hlist dt li:last-child:after,.mw-parser-output .hlist li dd:last-child:after,.mw-parser-output .hlist li dt:last-child:after,.mw-parser-output .hlist li li:last-child:after{content:")\a0 ";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li:before{content:" "counter(listitem)" ";white-space:nowrap}.mw-parser-output .hlist dd ol>li:first-child:before,.mw-parser-output .hlist dt ol>li:first-child:before,.mw-parser-output .hlist li ol>li:first-child:before{content:" ("counter(listitem)" "}.mw-parser-output .navbar{display:inline;font-size:75%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}.mw-parser-output .infobox .navbar{font-size:88%}.mw-parser-output .navbox .navbar{display:block;font-size:88%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}

表

話

編

歴

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]。