例
その場で、赤色の四角形を描画し、内側にそれを示す<canvas>要素：
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
»それを自分で試してみてください 定義と使用法
<canvas>タグは、スクリプト（通常はJavaScript）を経由して、その場で、グラフィックスを描画するために使用されます。
<canvas>タグを使用すると、実際にグラフィックスを描画するためのスクリプトを使用する必要があり、グラフィックスのための唯一のコンテナです。
ブラウザのサポート
表中の数字は、完全に要素をサポートする最初のブラウザのバージョンを指定します。
| 素子 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML 4.01とHTML5の違い
<canvas>タグは、HTML5で新しく追加されました。
ヒントと注意事項
注意：内部の任意のテキスト<canvas>要素をサポートしていないブラウザで表示されます<canvas> 。
ヒント：詳細情報<canvas>私たちの中の要素のHTMLキャンバスのチュートリアルを 。
ヒント：キャンバスオブジェクトで使用できるすべてのプロパティとメソッドの完全なリファレンスについては、当社に行くHTMLキャンバスリファレンス 。
属性
= HTML5で追加。
| 属性 | 値 | 説明 |
|---|---|---|
| height | pixels | キャンバスの高さを指定します |
| width | pixels | キャンバスの幅を指定します |
グローバル属性
<canvas>タグもサポートし、グローバルは、HTMLの属性 。
イベント属性
<canvas>タグもサポートしています。イベントは、HTMLの属性 。
デフォルトのCSS設定
なし。