Canvasとは？｜HTML5で図形やアニメーションを描く方法を初心者向けに徹底解説

Canvasとは？
1. canvasの基本的な仕組み
2. canvasでできること
canvasを使うために必要な知識
canvasの基本的な使い方
具体的な描画例
座標系の理解
canvasの応用例
ブラウザ対応状況
canvasの制限と注意点
canvasとSVGの違い
よくある質問（FAQ）
まとめ：canvasはWeb上の自由な描画スペース

Canvasとは？

Canvas（キャンバス）とは、HTML5から追加された、ブラウザ上に図形やグラフィックを描くための技術です。

「canvas」という英語は「画布（がふ）」、つまり絵を描くためのキャンバス布を意味します。IT用語としてのcanvasも、まさに「真っ白なキャンバスに絵を描く」ように、ブラウザ上にJavaScriptを使って自由に図形を描くことができる仕組みです。

canvasの基本的な仕組み

canvasは、HTMLの<canvas>タグとJavaScriptを組み合わせて使います。

イメージ：

HTMLで「真っ白なキャンバス（描画スペース）」を用意する
JavaScriptという「筆」を使って、そのキャンバスに図形を描く

従来、Webページ上に図形を表示するには、GIF・JPEG・PNGなどの画像ファイルを事前に作成してアップロードする必要がありました。また、動きのあるコンテンツを作るには、FlashやJavaアプレットといったプラグインが必要でした。

しかし、canvas要素の登場により、プラグイン不要で、JavaScriptだけで動的に図形やアニメーションを作成できるようになりました。

canvasでできること

canvasを使うと、以下のようなことができます。

基本的な図形の描画：

四角形、三角形、円、線などの図形
複雑な曲線やパス
グラデーションや影の効果

画像の操作：

画像の読み込みと表示
画像の切り抜き、拡大縮小、回転
画像フィルター効果

テキストの描画：

自由な位置にテキストを配置
フォント、サイズ、色の指定

アニメーション：

動きのある図形
パラパラ漫画のようなアニメーション

インタラクティブなコンテンツ：

ブラウザゲーム
データビジュアライゼーション（グラフ、チャート）
画像編集ツール
お絵描きアプリ

canvasを使うために必要な知識

canvasを使いこなすには、以下の3つの知識が必要です。

1. HTML5

canvasはHTML5の機能です。HTML5は、HTMLの最新バージョン（第5版）で、2014年に正式発表されました。

現在、「HTML」といえば基本的にHTML5のことを指します。HTML5には、canvasの他にも以下の機能があります。

動画を埋め込む<video>タグ
音声を埋め込む<audio>タグ
フォームの入力チェック機能
マルチデバイス対応

2. JavaScript

canvasで実際に図形を描くには、JavaScriptが必須です。

JavaScriptは、Webブラウザ上で動くプログラミング言語で、HTMLだけでは実現できない「動き」を作ることができます。

canvasでは、JavaScriptで「どこに」「何を」「どう描くか」を指定します。

3. CSS3（補助的に使用）

CSS3は、CSSの最新バージョンで、HTMLで作ったコンテンツの装飾やレイアウトを決める言語です。

canvasでは、主に以下のような用途でCSSを使います。

canvas要素の背景色を設定
canvas要素の配置やサイズ調整（ただし、canvas内部の描画サイズはHTMLまたはJavaScriptで指定するのが推奨）

注意：canvasで描画した図形には、CSSのレイアウト指定は適用されません。

canvasの基本的な使い方

それでは、実際にcanvasを使って図形を描いてみましょう。

手順1：HTMLでcanvas要素を配置

まず、HTMLファイルに<canvas>タグを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvasサンプル</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300">
    このブラウザはcanvas要素をサポートしていません。
  </canvas>

  <script src="canvas.js"></script>
</body>
</html>

ポイント：

id属性：JavaScriptから要素を特定するために必要
width / height属性：描画領域のサイズ（省略すると幅300px、高さ150pxになる）
終了タグ必須：<canvas>～</canvas>のように、必ず閉じタグが必要
代替コンテンツ：<canvas>～</canvas>の間に書いた内容は、canvasに対応していないブラウザで表示される

手順2：JavaScriptでコンテキストを取得

次に、JavaScriptファイル（canvas.js）で、canvas要素を取得し、描画のための「コンテキスト」を準備します。

// canvas要素を取得
var canvas = document.getElementById('myCanvas');

// 2D描画のコンテキストを取得
var ctx = canvas.getContext('2d');

「コンテキスト」とは？

コンテキストは、「実際に絵を描く人」のようなものです。canvas要素が「キャンバス（紙）」だとすると、コンテキストは「筆を持って描く人」に相当します。

コンテキストの種類：

‘2d’：2次元グラフィックス用（通常はこれを使用）
‘webgl’：3次元グラフィックス用（WebGL ver1）
‘webgl2’：3次元グラフィックス用（WebGL ver2）

手順3：図形を描画

コンテキストを使って、実際に図形を描きます。

具体的な描画例

例1：四角形を描く

canvasで最も簡単に描ける図形は四角形です。

// canvas要素を取得
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 塗りつぶされた四角形を描く
ctx.fillStyle = '#FF6B6B';  // 色を指定（赤）
ctx.fillRect(50, 50, 200, 150);  // 四角形を描く

fillRect()の引数：

第1引数：左上のX座標
第2引数：左上のY座標
第3引数：幅
第4引数：高さ

四角形を描くメソッド3種類：

// 1. 塗りつぶし四角形
ctx.fillRect(50, 50, 200, 150);

// 2. 輪郭線だけの四角形
ctx.strokeRect(50, 50, 200, 150);

// 3. 四角形の領域を消去（透明にする）
ctx.clearRect(80, 80, 140, 90);

例2：線を描く

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

// 線の描画開始を宣言
ctx.beginPath();

// 始点を指定
ctx.moveTo(50, 100);

// 終点を指定
ctx.lineTo(350, 250);

// 線の色を指定
ctx.strokeStyle = '#4ECDC4';

// 線を描画
ctx.stroke();

線を描く手順：

beginPath()：「これから線を描きますよ」と宣言
moveTo(x, y)：「この座標から描き始めます」
lineTo(x, y)：「この座標まで線を引きます」
stroke()：実際に線を描画

注意：moveTo()やlineTo()だけでは、まだ線は表示されません。最後にstroke()を呼ぶことで、初めて線が見えるようになります。

例3：三角形を描く

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

// パスの開始
ctx.beginPath();

// 1つ目の頂点（始点）
ctx.moveTo(200, 50);

// 2つ目の頂点
ctx.lineTo(300, 200);

// 3つ目の頂点
ctx.lineTo(100, 200);

// パスを閉じる（自動的に始点に戻る）
ctx.closePath();

// 塗りつぶし
ctx.fillStyle = '#FFE66D';
ctx.fill();

closePath()について：

closePath()を使うと、現在の点から始点まで自動的に線が引かれて、図形が閉じられます。

例4：円を描く

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

// 円の描画開始
ctx.beginPath();

// 円を描く
ctx.arc(200, 150, 80, 0, Math.PI * 2, false);

// 塗りつぶし
ctx.fillStyle = '#95E1D3';
ctx.fill();

arc()の引数：

第1引数：円の中心X座標
第2引数：円の中心Y座標
第3引数：半径
第4引数：開始角度（ラジアン）
第5引数：終了角度（ラジアン）
第6引数：描画方向（false=時計回り、true=反時計回り）

ラジアンとは？

角度を表す単位です。度数法の「0°〜360°」を「0〜2π」で表します。

0° = 0
90° = π/2
180° = π
270° = 3π/2
360° = 2π（Math.PI * 2）

例5：テキストを描く

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

// フォントの設定
ctx.font = '30px Arial';

// 塗りつぶしテキスト
ctx.fillStyle = '#333333';
ctx.fillText('こんにちは！', 100, 100);

// 輪郭線だけのテキスト
ctx.strokeStyle = '#FF6B6B';
ctx.strokeText('Canvas', 100, 150);

テキスト描画のメソッド：

fillText(テキスト, x, y)：塗りつぶしテキスト
strokeText(テキスト, x, y)：輪郭線だけのテキスト

座標系の理解

canvasでは、左上が原点（0, 0）になります。

(0,0) ────→ X軸（右に向かって増加）
  │
  │
  ↓
 Y軸（下に向かって増加）

例えば、fillRect(50, 100, 150, 80)と指定すると、

左上の角が座標(50, 100)の位置
幅150px、高さ80pxの四角形が描かれます

canvasの応用例

1. グラフやチャートの作成

売上データや統計データを視覚化するグラフを動的に生成できます。

メリット：

ユーザーのデータに応じてリアルタイムでグラフを作成
画像ファイルを用意する必要がない

2. ブラウザゲーム

シューティングゲーム、パズルゲーム、アクションゲームなど、さまざまなゲームが作れます。

メリット：

プラグイン不要
スマホでも動作する

3. お絵描きアプリ

マウスやタッチ操作で自由に絵を描けるアプリケーションを作成できます。

4. データビジュアライゼーション

複雑なデータを視覚的にわかりやすく表現できます。

5. 画像編集

画像のフィルター効果、トリミング、回転などの加工ができます。

ブラウザ対応状況

canvas要素は、現在の主要ブラウザすべてで対応されています。

対応ブラウザ：

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Opera

対応していないブラウザ：

Internet Explorer 8以前

ただし、Internet Explorer 9以降は対応しています。また、Google が公開している「ExplorerCanvas（excanvas.js）」というJavaScriptライブラリを使えば、IE 6・7・8でもcanvasをエミュレート（模倣）できます。

canvasの制限と注意点

1. アクセシビリティの問題

canvas要素は単なるビットマップ画像であり、描かれた図形に関する情報（「これはボタンです」「これはリンクです」など）をブラウザが認識できません。

そのため、スクリーンリーダー（音声読み上げソフト）を使う視覚障害者の方にとって、canvasの内容を理解するのが難しい場合があります。

対策：

<canvas>タグ内に代替テキストを記述する
可能であれば、通常のHTML要素やSVGを使う

2. アニメーションはFlashより手間がかかる

canvasは静止画を描くための機能であり、アニメーション機能は持っていません。アニメーションを作るには、JavaScriptで「1コマ1コマ描画し直す」処理を実装する必要があります。

3. CSSでのサイズ変更に注意

CSSでcanvas要素のサイズを変更すると、描画内容が引き伸ばされて歪む可能性があります。canvasのサイズは、HTMLのwidth/height属性、またはJavaScriptで直接指定するのが推奨されます。

canvasとSVGの違い

canvas以外にも、ブラウザ上で図形を描く技術としてSVG（Scalable Vector Graphics）があります。

項目	Canvas	SVG
描画方式	ビットマップ（ピクセル単位）	ベクター（座標と式で表現）
拡大時の画質	ぼやける	常に鮮明
要素の操作	困難（すべて再描画が必要）	容易（個別の要素を操作可能）
パフォーマンス	大量の図形でも高速	要素が多いと遅くなる
アニメーション	JavaScriptで1コマずつ	CSSアニメーションも使える
適した用途	ゲーム、画像編集、複雑な描画	ロゴ、アイコン、インタラクティブな図

よくある質問（FAQ）

Q1: canvasとFlashの違いは何ですか？

A: Flashはプラグインが必要でしたが、canvasはブラウザ標準機能なのでプラグイン不要です。また、Flashは2020年末でサポートが終了しましたが、canvasは現在も開発が続いています。canvasはスマートフォンでも動作しますが、Flashは多くのスマホで動作しませんでした。

Q2: canvas内の図形をクリックしたときの処理はどうやって作るのですか？

A: canvasは「どこに何が描かれているか」を記憶していないため、クリック位置の座標を自分で計算して判定する必要があります。マウスクリック時の座標を取得し、その座標が図形の範囲内かどうかをJavaScriptで判定します。

Q3: canvasで描いた図形を画像として保存できますか？

A: はい、できます。canvas.toDataURL()メソッドを使うと、canvas内容をPNGやJPEG形式のデータURLに変換できます。これをダウンロードリンクとして提供すれば、ユーザーが画像として保存できます。

Q4: canvasのサイズを後から変更できますか？

A: はい、JavaScriptでcanvas.widthとcanvas.heightを変更できます。ただし、サイズを変更すると、それまで描いていた内容はすべて消えてしまうので注意が必要です。

Q5: canvas内にHTMLのボタンやリンクを配置できますか？

A: いいえ、canvasはビットマップ画像なので、HTML要素を配置することはできません。ボタンのように見える図形を描くことはできますが、実際にはJavaScriptでクリック判定を自作する必要があります。

Q6: canvasはモバイル（スマホ・タブレット）でも使えますか？

A: はい、使えます。ただし、タッチ操作に対応させるには、マウスイベントだけでなく、タッチイベント（touchstart、touchmove、touchendなど）も処理する必要があります。

Q7: JavaScriptライブラリを使うともっと簡単になりますか？

A: はい、canvasを扱いやすくするライブラリがたくさんあります。代表的なものには以下があります。

Paper.js：ベクターグラフィックス用
CreateJS：アニメーションやゲーム制作用
Three.js：3Dグラフィックス用（WebGL）
Chart.js：グラフ・チャート作成用

Q8: canvasとvideoタグを組み合わせることはできますか？

A: はい、できます。video要素から動画のフレームをcanvasに描画し、リアルタイムで画像処理（フィルター効果など）を適用するといった応用が可能です。

まとめ：canvasはWeb上の自由な描画スペース

canvasは、HTML5で追加された、ブラウザ上に図形やグラフィックを描くための強力な機能です。

canvasの特徴：

JavaScriptと組み合わせて動的に図形を描画
プラグイン不要で、すべての主要ブラウザで動作
ゲーム、グラフ、アニメーション、画像編集など幅広い用途
座標とメソッドを指定するだけで、複雑な図形も描ける

canvasを学ぶメリット：

データビジュアライゼーションのスキルが身につく
ブラウザゲーム開発の基礎が学べる
インタラクティブなWebコンテンツが作れる

canvasは奥が深く、学び始めると様々な表現ができることに驚くはずです。まずは簡単な四角形や円を描くことから始めて、少しずつ複雑な図形やアニメーションに挑戦してみてください！