その場で赤い四角を描画し、 <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>
Try it Yourself ❯
<canvas> タグは、スクリプト（通常 JavaScript）によって、その場でグラフィックスを描画するために使用します。
<canvas> タグは、単なるグラフィックスのコンテナで、実際にグラフィックスを描画するためには スクリプトを使用しなければなりません。
表中の数字は、要素を完全にサポートした最初のブラウザ・バージョンを指定しています。
| 要素 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
<canvas> タグは、HTML5 で新しく追加されました。
注: 要素の中のテキストは、 <canvas> をサポートしていないブラウザに表示されます。
チップ: <canvas> 要素の詳細については、HTML Canvas チュートリアルをご覧ください。
チップ: canvas オブジェクトで使用できるすべてのプロパティとメソッドの完全なリファレンスについては、 HTML Canvas リファレンスをご覧ください。
= HTML5 で新規追加。
| 属性 | 値 | 説明 |
|---|---|---|
| height | pixels | キャンバスの高さを指定する |
| width | pixels | キャンバスの幅を指定する |
<canvas> タグは、HTML のグローバル属性もサポートします。
<canvas> タグは、HTML のイベント属性もサポートします。
なし。