<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する

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

<canvas>タグの説明

<canvas>は、ウェブページ上に図形を描くために使用します。この要素を使うと、画像やプラグインを使わずにJavaScriptベースで図形やアニメーションが表現可能となります。

この機能はHTML5から追加されたものです。発表された当初、インタラクティブなコンテンツを直接扱うことができるようになるため、非常に注目されました。

もともとは、Apple社がSafariの独自拡張として策定した要素でしたが、その利便性が認識されるとMozilla(FireFox)やOpera等のベンダーも追随するようになり、事実上HTMLの標準仕様として認識されるようになっていきました。

現在では、WHATWG/W3Cによって正式な仕様として取り入れられ、Internet Explorerを含む主要ブラウザで利用可能となっています。

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

<canvas>タグの特徴

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

<canvas>に指定できる主な属性

width
描画する領域の幅を指定します。初期値は "300px" です。
height
描画する領域の高さを指定します。初期値は "150px" です。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<canvas>の使い方とサンプル

<canvas>のHTML部分は非常にシンプルです。width属性とheight属性でキャンバスの幅と高さを指定し、id属性で固有の名称を与えます。また、下記の通り、<canvas>に対応していないブラウザやスクリプトをオフにしている環境のために、代替テキストを用意しておきましょう。

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

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

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

	// 長方形を定義して塗る
	item1.fillStyle = '#00CCFF';
	item1.fillRect(10, 10, 150, 100);
</script>
表示確認
このブラウザはcanvasの描画に対応していません。

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

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

HTML
<canvas id="sample2" width="240" height="160" style="background-color:silver;">
このブラウザはcanvasの描画に対応していません。
</canvas>
<script>
	// canvasのidに対して2Dグラフィックの描画を開始
	const sample2 = document.getElementById('sample2');
	const item2 = sample2.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の描画に対応していません。

<canvas>に関連するHTMLタグ

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