<canvas>:スクリプトで定義されたグラフィックやアニメーションを表示する要素・HTMLタグの解説

取り扱い 標準仕様
カテゴリー フロー・コンテンツ
フレージング・コンテンツ
エンベッデッド・コンテンツ
親にできる要素 フレージング・コンテンツを受け入れる要素
子にできる要素 トランスペアレント・コンテンツ
対応ブラウザ caniuseで確認

<canvas>タグの解説

<canvas>は、スクリプトで定義されたグラフィックやアニメーションを表示する領域を作成します。これを使えば、画像やプラグインを使わずにJavaScriptで図形やアニメーションを表現できます。

<canvas>は、名前の通り絵を描くための範囲を定義する要素です。ここに表示される内容は、Canvas APIの仕様に従いJavaScriptで作成します。スクリプトが実行されない限り、<canvas>は何も表示されない無地の面積を確保するだけです。

<canvas>を使いこなすには、ウェブ上に公開されているサンプルやデモを見ながら、実際にコードを触ってみるのが一番の近道です。<canvas>に対応するJavaScriptのライブラリやAPIが多数提供されています。実現したいコンテンツのイメージが固まってきたら、用途に合ったリソースを選択していくことで、作業を大幅に省略することが可能な環境になっています。

<canvas>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
  • この要素はキャンバスの領域を指定するだけです。内部の描画はJavaScriptで定義します。

<canvas>要素に指定できる属性

width
キャンバスの幅を単位なしのピクセル値で指定します。初期値は"300"です。
height
キャンバスの高さを単位なしのピクセル値で指定します。初期値は"150"です。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<canvas>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。<canvas>自体のマークアップは非常にシンプルです。width属性とheight属性でキャンバスの幅と高さを指定し、id属性で固有の名称を与えます。また、<canvas>に対応していないブラウザやスクリプトをオフにしている環境のために、代替テキストを用意しておきましょう。


<canvas id="sample" width="240" height="160">
このブラウザはcanvasの描画に対応していません。
</canvas>

これで絵を描く前のキャンバスを用意することができました。しかし、このままでは何も表示されない空の領域が確保されただけです。そこで、<canvas>に描画する内容をJavaScriptで定義します。


<canvas id="sample_1" width="240" height="160">
このブラウザはcanvasの描画に対応していません。
</canvas>
<script>
	// canvasのidに対して2Dグラフィックの描画を開始
	const sample_1 = document.getElementById('sample_1');
	const item1 = sample_1.getContext('2d');

	// 長方形を定義して塗る
	item1.fillStyle = '#00CCFF';
	item1.fillRect(10, 10, 150, 100);
</script>

このように書くと、幅240px・高さ160pxのキャンバスの中に、150×100pxの長方形が描画されます。その図形を左辺から10px、上辺から10pxの位置に配置するように指定しています。

上記の例から分かるように、キャンバスと図形はレイヤー状に重なっています。これを何枚も重ねて複雑な図形を描画することも可能です。


<canvas id="sample_2" width="240" height="160">
このブラウザはcanvasの描画に対応していません。
</canvas>
<script>
	// canvasのidに対して2Dグラフィックの描画を開始
	const sample_2 = document.getElementById('sample_2');
	const item2 = sample_2.getContext('2d');

	// 長方形を定義して塗る
	item2.fillStyle = '#00CCFF';
	item2.fillRect(10, 10, 150, 100);

	// 円を描画する
	item2.beginPath();
    item2.strokeStyle = '#EECC00';
    item2.arc(120, 80, 40, 0, 2 * Math.PI, false);
	item2.lineWidth = 5; 
    item2.stroke();

	// 線を引く
	item2.beginPath();
	item2.strokeStyle = '#0000FF';
	item2.moveTo(0, 0);
	item2.lineTo(240, 160);
	item2.lineWidth = 2; 
	item2.stroke();
</script>

<canvas>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像ファイルを読み込む
<picture> 画像に対して複数のリソースを提供可能なコンテナを配置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで描かれたグラフィックやアニメーションを表示する
<audio> ページに音声コンテンツを埋め込む
<video> ページに動画コンテンツを埋め込む
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 音声や動画コンテンツにテキストトラックを提供する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する