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

canvas

< canvas 【 キャンバス 】 属性="属性値">~< /canvas >

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

なお、canvas要素は描写領域を提供するだけで実際の描写はJavaScriptによって行われるため、JavaScriptが無効の環境では使用できません。また、canvas要素の内容は、canvas要素に対応していない環境に対する代替コンテンツとなります。

カテゴリー ・エンベッディッドコンテンツ
・パルパブルコンテンツ
・フレージングコンテンツ
・フローコンテンツ
コンテンツモデル トランスペアレントコンテンツ
使用できる文脈 エンベッディッドコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

height 【ハイト 】

要素の高さを指定します。値には正の整数を指定する必要があります。

width 【ウィズ 】

要素の幅を指定します。値には正の整数を指定する必要があります。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

以下の例ではhead要素内のscript要素で外部スクリプト（JavaScript）を読み込んでおき、それをbody要素内のcanvas要素で描画しています。

HTML 
<head>
  <meta charset="utf-8" />
  <title>canvas要素 描写テスト</title>
  <script src="script.js">
  </script>
</head>

<body>
  <p>緑枠線の正方形が描画されます。</p>
  <canvas id="canvas" width="300" height="300">
  <p><a href="greenbox.html">正方形が表示されない場合は、こちらのページをご覧ください。</a></p>
  </canvas>
</body>
JavaScript 
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);
}