グラフ、ゲーム グラフィック、芸術、またはその他の視覚的な画像をその場でレンダリングするために使用できる、解像度に依存するビットマップ キャンバスを伴うスクリプトを提供する。
エンベディッド内容が期待される場所。
透過的であるが、A 要素、usemap 属性をもつ IMG 要素、BUTTON 要素、type 属性が Checkbox または Radio Button の状態にある INPUT 要素、ボタンである INPUT 要素、multiple 属性または表示サイズが 1 より大きい SELECT 要素を除いて、インタラクティブ内容の子孫をもたない。
どちらのタグも省略不可。
より適切な要素が利用可能である場合、著者は文書で CANVAS 要素を使うべきでない。たとえば、見出し、ページをレンダリングする CANVAS 要素を使用することは不適当である： 見出しの望ましいプレゼンテーション グラフィカルが強烈である場合、それは適切な要素（典型的には H1）を使用してマークアップし、CSS を使用していて、shadow trees のような技術をサポートするスタイリングする必要がある。
著者が CANVAS 要素を使用する場合、著者はまた、ユーザーに提示するとき、canvas のビットマップとして同じ機能や目的を基本的に伝える内容を提供しなければならない。この内容は CANVAS 要素の内容として置かれてもよい。CANVAS 要素の内容は、もしあれば、その要素のフォールバック内容である。
| コンテキスト モード | 動作 |
|---|---|
2d
| 手順に従って、ビットマップのサイズを幅と高さの内容属性の数値に設定します。 |
webgl または webgl2
| WebGL仕様で定義されている動作に従います。 [WEBGL] |
bitmaprenderer
| コンテキストのビットマップ モードが空白に設定されている場合は、手順を実行して ImageBitmapRenderingContext の出力ビットマップを設定し、CANVAS 要素のレンダリングコンテキストを渡します。 |
placeholder
| 何もしない。 |
none
| 何もしない。 |
次の例では、1 つの正方形のみが描画されているように見えます。
JavaScript：
// canvas is a reference to a <canvas> element
var context = canvas.getContext('2d');
context.fillRect(0,0,50,50);
canvas.setAttribute('width', '300'); // clears the canvas
context.fillRect(0,100,50,50);
canvas.width = canvas.width; // clears the canvas
context.fillRect(100,0,50,50); // only this square remains
縦の次元。¶縦幅でピクセル単位値。
<CANVAS width=100 height=100 style="border:1px solid black;">テスト<CANVAS>¶普通の要素とは違う次元のようだ
横の次元。¶横幅でピクセル単位値。
| 表示内容： |
| 表示内容： |