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

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

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

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

さらに詳細な説明を見る

サンプルソースを見る

canvas 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

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

この要素で使用できる属性
DOM インタフェース
interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(optional DOMString type, any... arguments);
  void toBlob(FileCallback? _callback, optional DOMString type, any... arguments);

  object? getContext(DOMString contextId, any... arguments);
};

詳細説明

ブラウザのサポート状況

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

IE8 以前で canvas 要素を使用する

旧式の IE (Internet Explorer) で canvas 要素を有効にするポリフィルとして、Google が公開した 「ExplorerCanvas」 という JavaScript ライブラリを利用することができます。

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>

W3C HTML5 仕様書

4.8.11 The canvas element