HTML Tag Reference

canvas 要素

グラフィック描写領域を提供する

canvas 要素は、スクリプトによって動的にグラフィックを描写可能なビットマップキャンバスを提供します。例えば、グラフを描写したり、ゲームなどのビジュアルイメージをその場でレンダリングするために使用したりできます。

グラフィックを描写できるといっても、canvas 要素以外に適切な要素が利用できるなら文書内で canvas 要素を使うべきではありません。例えばページの見出しをグラフィカルに表示したいからといって canvas 要素を使ったりはせず、見出し要素と、CSS、画像などの組み合わせでレンダリングするべきでしょう。

なお、canvas 要素は描写領域を提供するだけで実際の描写は JavaScript によって行われます。つまり、JavaScript が無効の環境では使用することができません。また、canvas 要素の内容は、canvas 要素に対応していない環境に対するフォールバックコンテンツとして機能します。

canvas 要素の仕様

コンテンツモデル

ただし、a 要素、usemap 属性を持つ img 要素、button 要素、type 属性が checkbox、radio、button のいずれか状態にある input 要素、multiple 属性、または「1」以上の size 属性値を持つ select 要素、および要素に tabindex 属性が指定されている場合を除き、インタラクティブコンテンツを子孫に持つことは不可。

この要素を使用できる文脈

エンベッディッド・コンテンツが期待される場所

この要素で使用できる属性

詳細説明

ブラウザのサポート状況

Chrome Firefox Internet Explorer Opera Safari
○ 1.0~ ○ 1.5~ ○ 9.0~ ○ 9.0~ ○ 2.0~

canvas 要素のサンプルソース

<!-- 基本的な使い方です。緑色の線で四角形を描写しています -->
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>canvas 描写テスト</title>

  <script>
    window.onload = function() {
     var canvas = document.getElementById('canvas');
     if ( ! canvas || ! canvas.getContext ) {
       return false;
     }
     var ct = canvas.getContext('2d');
     ct.strokeStyle = '#009900';
     ct.strokeRect(50, 50, 200, 200);
   }
  </script>

 </head>
 <body>

  <canvas id="canvas" width="500" height="500"></canvas>

 </body>
</html>
<!-- canvas 要素に対応しないブラウザへのフォールバックを提供します -->
<canvas id="canvas" width="500" height="500">
 <p>canvas 要素に対応したブラウザの場合、ここには2013年度のブラウザシェアに関する円グラフが表示されています。</p>
 <p>下記の画像はグラフを画像で表示したものですが、データの反映は canvas 要素版に比べて遅くなります。</p>
 <p><img src="/img/browser.png" alt="2013年度のブラウザシェアに関する円グラフ" /></p>
</canvas>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。