Canvas API

A small drawing area in the page where JavaScript can draw shapes, text, and images right on the spot.

canvas 要素

ページの中に小さな“お絵かきボード”を作って、JavaScriptで図形や文字、画像をその場で描ける仕組み。

canvas 要素の用意

Canvas は、HTML5 で新たに導入された canvas 要素に図を描画します。そのため、まず、事前に canvas 要素を用意する必要があります。

HTML

<canvas width="300" height="150">
	このブラウザは canvas に対応していません。
</canvas>
このブラウザは canvas に対応していません。

ここでは、中身を何も用意していないため、何も表示されていません。

canvas 要素には、Canvas 領域に幅を表す width 属性と、高さを表す height 属性が規定されます。これらに指定する値は数値でなければいけません。そして、その長さの単位はピクセルです。

これらの属性は必須ではありません。もし指定しなければ、デフォルト値が適用され、width は 300、height は 150 となります。

ブラウザは、canvas 要素の準備ができると、透明な黒で全体を塗りつぶした状態でレンダリングします。そのため、canvas に何も描かなければ、ページの背景が透けた状態になります。

次に、用意した canvas 要素に図形を描画するために、JavaScript を使用するので、JavaScript の指示がどの要素に対するものか明確にするための名前を付けます。

HTML

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

ここでは、「 myCanvas 」と名前を付けました。

次からは、canvas 要素に描画するための JavaScript を準備していきます。

まず、関数（function）を準備し、ここでは「 draw() 」と名前を付けました。

HTML

<script>
	function draw() {
	};
</script>

用意した関数を、body 要素で load イベントを使って呼び出します。

HTML

<html>
	<head>
		<script>
			function draw() {
			};
		</script>
	</head>
	<body onload="draw();">
		<canvas id="myCanvas"></canvas>
	</body>
</html>

次に、変数 canvas を用意し、getElementById メソッドを使って、上で名前を付けた canvas 要素の ID（myCanvas）を取得します。

HTML

<script>
	function draw() {
		const canvas = document.getElementById('myCanvas');
	};
</script>

さらに、変数 context を用意し、canvas 要素で描画方法を指定するための getContext() メソッドを呼び出します。他の描画方法もありますが、ここでは 2D での描画方法を指定します。

HTML

<script>
	function draw() {
		const canvas = document.getElementById('myCanvas');
		const context = canvas.getContext('2d');
	};
</script>

これで、canvas 要素に図形を描画するための準備ができましたので、矩形を描画するための fillRect メソッドを使ってみます。

HTML

<script>
	function draw() {
		const canvas = document.getElementById('myCanvas');
		const context = canvas.getContext('2d');

		context.fillRect(25, 25, 100, 100);
	}
</script>

canvas 要素の描画サンプル

ここまでで、黒い正方形が描画されたと思います。色が黒いのは、キャンバスに塗りつぶし色の初期値（context.fillStyle）が黒のため、そのままだと黒い四角になります。背景は透明のままです。

ちなみに fillRect メソッドを書き直すと次のようになります。

fillRect(x, y, width, height);

それぞれ、

x
矩形を描画する x 座標のスタート地点。
y
矩形を描画する y 座標のスタート地点。
width
矩形の横幅。
height
矩形の縦幅。

を、意味し、ピクセル単位で指定します。

よくある質問

Q. width/height はCSSで指定してもいい？
A. 見た目サイズはCSSでもOKですが、描画の解像度は属性（数値のピクセル）で指定します。CSSだけで拡大するとぼけます。
Q. 背景が透けるのはなぜ？
A. canvas の初期ピクセルは「透明な黒」です。何も描かない部分は透過します。
Q. デフォルトで黒い四角になる理由は？
A. fillStyle の初期値が黒（#000）だからです。色を変えるには先に context.fillStyle = '色'; を設定します。
Q. getContext('2d') が null になることはある？
A. あります。ブラウザや拡張機能の影響で失敗することがあるので、if (!context) return; のようにガードしましょう。
Q. 画像やアニメーションも作れる？
A. 可能です。静止画なら図形・画像合成、動きは requestAnimationFrame を使うと滑らかに更新できます。

よくあるエラー早見表

TypeError: Cannot read properties of null (reading 'getContext')
原因：id の打ち間違い／要素より先にスクリプトが実行。
対処：idを確認、load/deferを使う。
描画がぼける
原因：CSSだけで拡大。
対処：属性のwidth/heightを適切に設定、HiDPI対応（devicePixelRatio）。
色が変わらない
原因：fillStyle を設定していない。
対処：描画前に context.fillStyle を指定。
何も表示されない
原因：getContext('2d') が失敗／描画コードが実行されていない。
対処：ガード・イベント順序・コンソール確認。