<canvas></canvas>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 トランスペアレント（親要素のコンテンツモデルを継承） ただし、一部のインタラクティブ・コンテンツは含められない 本文参照

canvas要素は、グラフィックスを描くための領域を表します。


<canvas id="example" width="300" height="150"></canvas>
属性 値
任意属性
width="" 領域の幅 数値 ピクセル数（既定値は 300）
height="" 領域の高さ 数値 ピクセル数（既定値は 150）
グローバル属性
id="" 要素のID名 文字列 固有の識別名
  • width属性とheight属性を省略した場合は、300×150pxの領域が作成されることになります。

canvas要素を使用することで、グラフやゲームなどのグラフィックスを動的に描画できるようになります。

  • canvas要素は、描画する領域だけを作成します。そこに描かれる内容は、別途JavaScriptで作成する必要があります。

グラフィックスの埋め込み方法

グラフィックスを表示するには、グラフィックスを生成するスクリプトとそれを描画する領域（canvas要素）を関連付ける必要があります。

次の例では、canvas要素にid属性を指定して、canvas というID名によってスクリプトと領域とを関連付けています。

<canvas id="canvas"></canvas>

<script>

// 塗りつぶされた四角形を表示するスクリプト
var canvas = document.getElementById('canvas');

if (canvas && canvas.getContext) {

        var ctx = canvas.getContext('2d');
        ctx.fillRect(50,30, 200,90);

}

</script>

代替コンテンツについて

canvas要素に対応していない、またはスクリプトをオフにしている環境では、この要素の内容が利用されることになります。

次の例では、比率を表す円グラフの代替として、テキストによる情報をcanvas要素内に配置しています。

<canvas id="graph" width="300" height="300">

<p>お使いのブラウザでは、円グラフを表示することができませんでした。</p>
<p>世代別の比率は次のようになります。</p>

<dl>
<dt>20歳以下</dt><dd>15%</dd>
<dt>21歳～50歳</dt><dd>65%</dd>
<dt>51歳以上</dt><dd>20%</dd>
</dl>

</canvas>
  • 仕様書では、canvas要素を使用する場合は代替コンテンツを提供しなければならない、とされています。

使用に関する注意事項

仕様書では、より適切な要素がある場合はcanvas要素を使うべきではないとしています。

例えば、グラフィカルに表現したいからといって、見出しにcanvas要素を使うのは不適切です。この場合は、h1-h6要素を用いた上でCSSなどで装飾するようにしましょう。

要素の内容に関して

canvas要素は、親要素のコンテンツ・モデルを継承します（トランスペアレント）。ただし、以下の要素以外のインタラクティブ・コンテンツは配置できません。

  • 上記のインタラクティブ・コンテンツは配置が可能、ということになります。
旧HTMLからの変更点

使用例

簡単な図形を描いた例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

#canvas {
background: #ffffff url(grid.gif) no-repeat;
}

</style>

<script>

window.onload = function() {

        var canvas = document.getElementById('canvas');

        if (!canvas || !canvas.getContext) { return false; }
        var ctx = canvas.getContext('2d');

        // 三角 + 線
        ctx.beginPath();
        ctx.moveTo(100, 40); // x, y
        ctx.lineTo(150, 120);
        ctx.lineTo(50, 120);
        ctx.closePath();
        ctx.strokeStyle = '#ff0000';
        ctx.stroke();

        // 四角 + 線
        ctx.strokeStyle = 'rgb(0,0,255)';
        ctx.strokeRect(200,40, 160,80); // x,y, width,height

        // 四角 + 塗りつぶし
        ctx.fillStyle = 'rgb(50%,50%,50%)';
        ctx.fillRect(220,60, 120,40);

        // 四角 + くり抜き
        ctx.clearRect(260,70, 40,20);

}

</script>

</head>
<body>

<canvas id="canvas" width="410" height="160">
<p>代替コンテンツ</p>
</canvas>

</body>
</html>
表示例

代替コンテンツ
  • 上記の図形は動きません。