HTML <canvas>タグ


例

<canvas> 要素を使用して赤い長方形を表示します:

<canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>

試してみる »

ブラウザサポート

Internet Explorer Firefox Opera Google Chrome Safari

IE 9、Firefox、Opera、Chrome、Safari は <canvas> タグをサポートしています。

注釈:IE 8 以前の IE ブラウザは <canvas> タグをサポートしていません。


タグの定義と使用説明

<canvas> タグはスクリプト(通常は JavaScript)を使用してグラフィック(チャートやその他の画像など)を描画します。

<canvas> タグは単なるグラフィックコンテナであり、グラフィックを描画するにはスクリプトを使用する必要があります。


HTML 4.01 と HTML5 の違い

<canvas> タグは HTML5 の新しいタグです。


ヒントと注釈

注釈:<canvas> 要素内のテキストは、<canvas> をサポートしていないブラウザに表示されます。

ヒント:canvas オブジェクトのすべてのプロパティとメソッドについては、次を参照してください。HTML キャンバスリファレンス。


属性

New: HTML5 の新属性。

属性 值 説明
heightNew pixels キャンバスの高さを指定します。
widthNew pixels キャンバスの幅を指定します。

グローバル属性

<canvas> タグはサポート:HTML のグローバル属性。


イベント属性

<canvas> タグはサポート:HTML のイベント属性。

その他の拡張