これからJavaScriptのCanvas APIの使い方を解説していきます。今回はそのはじめの基本的なところの解説です。

目次 [ close ]
  1. HTMLにCanvas要素を配置
  2. Canvasに長方形を描画
  3. Canvasの挙動
  4. 最終的なコード

HTMLにCanvas要素を配置

htmlの<body></body>内に以下の<canvas></canvas>要素を配置します。

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

jsで扱うためid属性を設定してあります。canvasはインライン要素なのでCSSにてdisplayプロパティをblockに変更すると扱いやすくなります。それから、範囲がわかりやすいように背景色も変更します。

canvas {
  display: block;
  background: skyblue;
}
canvas要素

以上の設定でこのようなcanvasが表示されます。既定で幅300px、高さ150pxとなり、canvas要素のwidth、height属性で変更することができます。

<canvas id="canvas" width="150" height="150"></canvas>
canvas要素（幅と高さを指定）

Canvasに長方形を描画

準備ができたので本題のjsを使ってcanvasに長方形を描画していきましょう。

まずはcanvas要素を取得して、描画のために必要なオブジェクトを取得します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ここで取得したctxオブジェクトを使い、canvasを操作することができます。fillRect()で長方形を描画します。

ctx.fillRect(0, 0, 100, 100);
canvasに長方形を描画

fillRect(x, y, width, height)という4つの引数を取ります。xとyは長方形の描画を始める左上の座標になります。既定で色は黒ですが、描画の前にfillStyle()で変更することができます。

ctx.fillStyle = 'green';
長方形の色を変更

色の指定方法はcssと同じくRGB値やカラーコードなどによる指定が可能です。以下はどれも白を指定。

ctx.fillStyle = 'white';
ctx.fillStyle = '#fff';
ctx.fillStyle = '#ffffff';
ctx.fillStyle = 'rgb(255 255 255)';
ctx.fillStyle = 'hsl(0 0% 100%)';

Canvasの挙動

canvasは画像のようにふるまいます。先ほど描画したもの（水色背景に緑の正方形）を右クリックして「名前を付けて保存」してみましょう（上の画像ではなく、自身でcanvasに描画したものです）。画像のように保存することができました。しかし、背景に設定した水色が反映されておらず、背景は透過されています。これは、canvasはjsで描画した情報だけを保持しているためです。もともとが透明なcanvasに、正方形を描画したわけです。透明でcanvas領域が視認できないため、最初に背景に水色を設定したわけです。なので、cssで指定したことは視覚的には反映されますが、実際にcanvasには影響を与えません。

次に、cssでcanvasの幅と高さを変更してみましょう。

canvas {
  display: block;
  background: skyblue;
  width: 150px;
  height: 150px;
}
cssにて幅、高さを指定

幅が半分になったため、アスペクト比が崩れて正方形が縦長になりました。先ほどの説明の通り、canvasは画像のようにふるまいます。jsにて描画された元のcanvasを無理やりリサイズしているためです。試しにこちらを右クリックして保存してみましょう。先ほど保存したものと同じく、cssによるリサイズ前の画像が保存されたはずです。

ではcssの設定は元に戻し、最初に紹介したcanvas要素のwidth、height属性にて指定してみましょう。

htmlにて幅、高さを指定

この方法では、canvasの描画領域自体の幅と高さが変更されるためこのようになります。

最終的なコード

上で説明した通り、cssでの幅と高さの指定ではcanvasのアスペクト比を崩してしまうため、基本的にはcanvas要素のwidth、height属性にて指定しますが、canvasは基本的にすべてjsにて操作するのが効率的なので、jsにてcanvasのwidth、heightプロパティを変更する方法がよく使われます。それを踏まえて、html、css、jsの最終的なコードは以下となります。

<canvas id="canvas"></canvas>
canvas {
  display: block;
  background: skyblue;
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 150;
canvas.height = 150;

ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 100, 100);
jsにて幅、高さを指定