「Webページに動きのあるグラフィックを表示したい」
「JavaScriptを使って、図形やイラストを自由に描いてみたい」
そう思ったときに活躍するのが、HTML5の Canvas API です。
Canvasを使うと、普段CSSだけでは難しい複雑な図形や円、さらにはアニメーションやゲームのようなインタラクティブな表現まで、JavaScriptのコードだけで実現できるようになります。
一見難しそうに見えるCanvasですが、仕組み自体はとてもシンプルです。この記事では、Canvas APIの基本概要から、基本的な図形・テキストの描画、回転や移動といった操作まで、コード例と一緒にわかりやすく解説します！
Canvas APIとは
Canvasの基本概要
Webでグラフィックを扱う技術にはいくつか選択肢がありますが、「Canvas API」は、 「JavaScriptでピクセルを高速に描き換えるための2D描画特化型ツール」 です。
似ている技術に「SVG」や「WebGL」が挙げられますが、以下のような住み分けになります。
- SVG
- 拡大しても荒れないベクターグラフィック（UIパーツやアイコン、単純な図形向き）。
- Canvas
- ピクセル単位で描くラスターグラフィック。大量のオブジェクトを動かしたり、ピクセルを直接いじる処理（ゲームや画像処理）に強い。
SVGはアイコン、ロゴ、簡単なグラフ、拡大縮小が多いUI。
CanvasはWebゲーム、動画・画像エディタ、ピクセル単位の複雑な演出。
といった住み分けがオススメです。
- WebGL
- ブラウザでGPUを使った本格的な3Dグラフィックスを動かすためのAPI。
- Canvas
- 日常的な2D表現ならこれ一つで十分なパフォーマンスが出せる、手軽かつパワフルな選択肢。
WebGLは本格的な3Dゲーム、動きの激しい大量のパーティクル（粒子の表現）。
Canvasはグラフ、簡単な2Dゲーム、画像の切り抜き・加工。
といった住み分けがオススメです。
「Canvas」という名前の通り、この機能は 「ブラウザの中に真っ白なキャンバス（画用紙）を置き、JavaScriptのブラシで自由に絵を描く仕組み」 です。
DOM（HTMLの要素）を一つずついじるのとは異なり、キャンバスの中は1枚の「絵の具で描かれたキャンバス」のような状態。そのため、大量の図形を同時に動かしたり、画像を高速で処理するのに最適です。
「難しそう」と感じるかもしれませんが、基本のコードはシンプルです。これから基本の描画手順を解説していきます！
描画の基本準備
まずHTMLに<canvas>タグを追加します。
ここで留意しなければいけないこととして、canvas要素のサイズの指定は CSSではなくHTMLの属性(height,width)で指定しましょう。
<canvas id="sample" width="300" height="300"></canvas>
次に、JavaScriptからこのcanvas要素を参照し、描画用のContextオブジェクトを取得しま
す。
let canvas = document.getElementById('sample');
let ctx = canvas.getContext('2d');
canvasエレメントオブジェクトのgetContext()関数の引数に'2d'を指定することで、2d用のContextオブジェクトを取得しています。
これでcanvasの描画準備が整いました！次の項目からは実際に図形を描画してみましょう。
図形とテキストの描画
基本図形の描画（四角形）
まずは図形の基本である四角形を描いてみましょう。
先ほどのJavaSctiptを以下のように追記します。
let canvas = document.getElementById('sample');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.rect(30, 30, 40, 40);
ctx.stroke();
実行すると、以下ような四角形が表示されます
それぞれのコードの解説をします。
まず beginPath() は、「現在のパスをリセットする」という意味を持ちます。何か描画を始めるときには必ずこのbeginPath()をはじめに記述します。
例えるならば、「新しい筆に持ち替える」という状態です。
次の strokeStyle というプロパティでは線の色を設定しています。一般にはCSSなどの色指定と同じくRGBの16進数指定を行います。ここでは#000000なので、真っ黒な線という意味になります。
rect()メソッド は、四角形を描くときに使われるメソッドです。ここでは4つの引数を指定していますが、それぞれの意味は次の通りです。
| 引数 | 意味 |
|---|---|
| 第1引数 | 四角形の左上の点のx座標 |
| 第2引数 | 四角形の左上の点のy座標 |
| 第3引数 | 四角形の幅 |
| 第4引数 | 四角形の高さ |
このときのx座標、y座標はcanvas要素の左上を0と考えます。
そして最後に stroke() メソッドを実行します。これは、beginPath()メソッド以降に指定した色や形を描く、という意味を持ちます。
stroke()メソッドを記述しないとそもそも描画されないため忘れずに記載しましょう。
ちなみに、塗りつぶしの四角形を描画したい場合、strokeStyle()をfillStyle()、stroke()をfill()に置き換えることで可能です！
let canvas = document.getElementById('sample');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.rect(30, 30, 40, 40);
ctx.fill();
円・直線・多角形の描画
円
まずは円の描き方です。
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.arc(30, 30, 20, 0, Math.PI*2, false);
ctx.stroke();
beginPath()、strokeStyle、stroke()に関しては四角形と同じ意味を持ちます。
今回の場合、arc() を使用することで円の表現が可能となります。
各引数は以下の通りです。
| 引数 | 意味 |
|---|---|
| 第1引数 | 円の中心のx座標 |
| 第2引数 | 円の中心のy座標 |
| 第3引数 | 円の半径 |
| 第4引数 | 円弧の開始位置（x軸正方向を0とする） |
| 第5引数 | 円弧の終了位置（円1周で2π。Math.PI=円周率π） |
| 第6引数 | trueなら反時計回り、falseなら時計回りで描画 |
直線
次に直線の描き方です。線は複数のメソッドを使うため少し複雑です。
ctx.beginPath();
ctx.moveTo(30, 70);
ctx.lineTo(80, 70);
ctx.lineTo(30, 110);
ctx.moveTo(30, 150);
ctx.lineTo(80, 150);
ctx.stroke();
連続した直線を描く際にはmoveTo()メソッドとlineTo()メソッドを使います。それぞれ第1引数にx座標、第2引数にy座標を記述します。
moveTo() は描画を開始する点の位置を指定し、lineTo() で座標を指定するとmoveTo()からlineTo()までの直線を描きます。
多角形
多角形(四角形以外)を直接描くメソッドは存在しないため、先ほどのmoveTo()、lineTo()で作成が基本となります。
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(80, 80);
ctx.lineTo(30, 80);
ctx.lineTo(30, 30);
ctx.stroke();
曲線の描画
曲線は円弧とベジェ曲線の二種類の表現が可能です。
円弧
円弧は先ほどの円の描画で使用したarc()メソッドの第4,5引数を用います。
ctx.beginPath();
ctx.arc(60, 60, 30, Math.PI / 4, Math.PI * 3 / 4, false);
ctx.stroke();
今回の場合、中心点が(60,60)の半径が30の円を描こうとしています。しかし前回の円の描画とは第4,5引数の内容が違います。
ここで使われている「Math.PI / 4, Math.PI * 3 / 4」の値は ラジアン値 という角度を表す数値となっています。
ラジアン値は「Math.PI*2 = 360度」のため、今回の場合
・第4引数：(1/4)/2*360＝45度
・第5引数：(3/4)/2*360＝135度
となり、45度から135度にかけて時計回り(false)で円弧が描画されるということになります。
ここで第6引数にtrueを指定した場合は以下のような円弧となります。
ベジェ曲線
ベジェ曲線という単語はご存じでしょうか？ グラフィックツールやアニメーションのイージングなどを触っている方はご存じかもしれません。
数学的な解説は省きますが、ベジェ曲線を理解すれば複雑な曲線を描くことが可能になります。
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.bezierCurveTo(50, 50, 150, 150, 200, 200);
ctx.stroke();
ベジェ曲線を描画する際には、bezierCurveTo() メソッドを使用します。
| 引数 | 意味 |
|---|---|
| 第1引数 | 始点の制御点のx座標 |
| 第2引数 | 始点の制御点のy座標 |
| 第3引数 | 終点の制御点のx座標 |
| 第4引数 | 終点の制御点のy座標 |
| 第5引数 | 終点のx座標 |
| 第6引数 | 終点のy座標 |
ベジェ曲線に関しては数学的な知識や「制御点」について勉強するとさらに理解が深まるので是非学んでみてください。
テキスト（文字）の描画
canvasには、図形だけではなく文字を描画することもできます。
// デフォルト
ctx.fillText('Text', 0, 30);
// フォントをサンセリフに、フォントサイズを15pxに
ctx.font = '15px sans-serif';
ctx.fillText('Text', 0, 60);
// ボールド
ctx.font = 'bold 15px sans-serif';
ctx.fillText('Text', 0, 90);
// イタリック
ctx.font = 'italic 15px sans-serif';
ctx.fillText('Text', 0, 120);
// ボールド + イタリック
ctx.font = 'bold italic 15px sans-serif';
ctx.fillText('Text', 0, 150);
fontでテキストのサイズやフォント、装飾の指定、fillText() メソッドで表示するテキストと座標を指定します。
スタイルの基本設定（色・枠線・透明度・線の太さ）
様々な図形に共通で使われるスタイルの指定方法を紹介します。
- 塗りつぶし
-
ctx.fillStyle = "#000000"; // 色はRGB形式 - 枠線の色
-
ctx.strokeStyle = "#000000"; // 色はRGB形式 - 枠線の太さ
-
ctx.lineWidth = 1; // 太さはpx単位 - 透明度
-
ctx.globalAlpha = 0.4; // 透明度は0~1の範囲で指定 ctx.strokeStyle = rgba(0, 0, 0, 0.5); // 色指定時にrgbaを使用することでも可能(第4引数が透明度) - 影
-
ctx.shadowColor = '#BBBBBB'; // 影の色 ctx.shadowBlur = 1; // 影のぼかし(デフォルトは0、数が大きくなるとぼかしが強くなる) ctx.shadowOffsetX = 3; // 影をx軸方向にずらす ctx.shadowOffsetY = 1; // 影をy軸方向にずらす
図形の変形、移動
拡大・縮小
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.arc(50, 50, 20, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.scale(1.7, 2.1);
ctx.arc(50, 70, 20, 0, Math.PI * 2, false);
ctx.stroke();
scale() メソッドの第1引数にx軸方向の拡大率、第2引数にy軸方向の拡大率を指定することで図形の拡大縮小が可能。
回転
ctx.beginPath();
ctx.rect(200, 0, 50, 80);
ctx.stroke();
ctx.beginPath();
ctx.rotate(60 * Math.PI / 180);
ctx.rect(200, 0, 50, 80);
ctx.stroke();
図形を回転して描画するためには rotate() メソッドを使用します。引数は、「回転させたい角度 * Math.PI / 180」(ラジアン値)を指定します。
移動
ctx.beginPath();
ctx.rect(10, 10, 60, 80);
ctx.stroke();
ctx.beginPath();
ctx.translate(100, 40);
ctx.rect(10, 10, 60, 80);
ctx.stroke();
図形の移動には translate() メソッドを使用します。第1引数にはx軸方向、第2引数にはy軸方向へ移動する値を設定します。
イラストを作ってみよう
ここまでで学んだものを使えば、↓ようなイラストもJavaScriptで描けるようになります！
作るうえでの考え方として、powerpointやexcelなどで使われる図形ツールで描画するイメージで、丸、多角形、線を配置し色付けをしていくとわかりやすいかもしれません。
サンプルコード
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// --- 1. 耳 (パスと塗りつぶし) ---
ctx.fillStyle = '#ffb347'; // オレンジ色の毛色
// 左耳
ctx.beginPath();
ctx.moveTo(110, 160);
ctx.lineTo(110, 70);
ctx.lineTo(190, 120);
ctx.closePath();
ctx.fill();
// 右耳
ctx.beginPath();
ctx.moveTo(290, 160);
ctx.lineTo(290, 70);
ctx.lineTo(210, 120);
ctx.closePath();
ctx.fill();
// 内側の耳 (ピンク)
ctx.fillStyle = '#ffb6c1';
// 左内耳
ctx.beginPath();
ctx.moveTo(125, 150);
ctx.lineTo(125, 90);
ctx.lineTo(180, 125);
ctx.fill();
// 右内耳
ctx.beginPath();
ctx.moveTo(275, 150);
ctx.lineTo(275, 90);
ctx.lineTo(220, 125);
ctx.fill();
// --- 2. 輪郭・顔のベース (円) ---
ctx.fillStyle = '#ffb347';
ctx.beginPath();
ctx.arc(200, 200, 100, 0, Math.PI * 2);
ctx.fill();
// --- 3. 目 (小さな黒円) ---
ctx.fillStyle = '#333333';
// 左目
ctx.beginPath();
ctx.arc(160, 180, 10, 0, Math.PI * 2);
ctx.fill();
// 右目
ctx.beginPath();
ctx.arc(240, 180, 10, 0, Math.PI * 2);
ctx.fill();
// 目の光 (小さな白円)
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(157, 177, 3, 0, Math.PI * 2);
ctx.arc(237, 177, 3, 0, Math.PI * 2);
ctx.fill();
// --- 4. 鼻 (逆三角形) ---
ctx.fillStyle = '#ff6b81';
ctx.beginPath();
ctx.moveTo(190, 205);
ctx.lineTo(210, 205);
ctx.lineTo(200, 218);
ctx.closePath();
ctx.fill();
// --- 5. 口 (円弧・線) ---
ctx.strokeStyle = '#333333';
ctx.lineWidth = 3;
ctx.lineCap = 'round';
// 口の左側
ctx.beginPath();
ctx.arc(185, 222, 15, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.stroke();
// 口の右側
ctx.beginPath();
ctx.arc(215, 222, 15, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.stroke();
// --- 6. ひげ (直線) ---
ctx.lineWidth = 2;
// 左のひげ
ctx.beginPath();
ctx.moveTo(130, 200); ctx.lineTo(70, 190);
ctx.moveTo(130, 215); ctx.lineTo(60, 215);
ctx.moveTo(130, 230); ctx.lineTo(70, 240);
ctx.stroke();
// 右のひげ
ctx.beginPath();
ctx.moveTo(270, 200); ctx.lineTo(330, 190);
ctx.moveTo(270, 215); ctx.lineTo(340, 215);
ctx.moveTo(270, 230); ctx.lineTo(330, 240);
ctx.stroke();
まとめ
本記事では、Canvas APIの基礎知識から、基本図形・テキストの描画方法、スタイルの指定、変形操作までを解説しました。
今回学んだポイント
-
Contextの取得: HTMLで
<canvas>を設置し、getContext('2d')で描画コンテキストを取得して操作を開始する -
基本図形とパス:
fillRectなどの簡易メソッドと、beginPath()〜stroke()を使うパス指定を使い分ける - ベジェ曲線とテキスト: 曲線や文字も簡単なAPIコールで自由に描画・スタイリングできる
-
変形操作:
translateやrotateを使うことで、複雑な配置や回転表現が可能になる
Canvas APIは、JavaScriptだけでピクセル単位の自由な表現ができる非常に強力なツールです。まずは小さな四角形や円をコードで動かすところから、表現の幅を広げてみてください！