1.canvasとは？
<canvas>（キャンバス）は、JavaScriptを使って自由に絵や図形を描けるHTMLのタグです。
「キャンバス」という名前のとおり、お絵描きやアニメーションができる画面のようなものと思ってください。
何ができるの？
canvasを使うと、たとえばこんなことができます：
- 四角や円などの図形を描く
- 線やグラフを描画する
- ゲームの画面を作る（キャラの移動、当たり判定など）
- アニメーションやインタラクティブな演出を加える
HTMLだけじゃできないことができる！
通常のHTMLやCSSでは、「ここに丸い絵を描きたい」といったことはできません。
ですが、canvasなら次のようなコードで円や四角形をJavaScriptで描けるようになります。
// 円を描くサンプル
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fill();ctx は描画用の「コンテキスト」と呼ばれるものです（次のセクションで説明します）
canvasの特徴まとめ
| 特徴 | 内容 |
|---|---|
| 描画スタイル | JavaScriptで直接描画（HTMLタグやCSSとは別物） |
| 描画できるもの | 図形、線、テキスト、画像、アニメーションなど |
| 応用の可能性 | ゲーム開発・ビジュアライザー・お絵かきツールなどに最適 |
| 注意点 | DOM操作は不可・描画内容は更新しないと消えない |
canvasは一見むずかしそうですが、基本をおさえればとても楽しく奥が深い世界です。
2.canvasの基本の書き方
canvasを使うには、HTMLにcanvasタグを追加し、JavaScriptで描画処理を書くのが基本です。
ステップ①：HTMLにcanvasタグを追加
まずはHTMLでキャンバスの「土台」を作ります。
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>id="myCanvas"：JavaScriptからこのcanvasを指定するための名前
widthとheight：キャンバスのサイズ（ピクセル）
styleで枠線を付けて見やすくしています
ステップ②：JavaScriptで図形を描く
次にJavaScriptで、このキャンバスに四角形を描いてみましょう。
<script>
// canvas要素を取得
const canvas = document.getElementById("myCanvas");
// 描画用の「2Dコンテキスト」を取得
const ctx = canvas.getContext("2d");
// 四角形を描く
ctx.fillStyle = "skyblue"; // 塗りつぶしの色を指定
ctx.fillRect(50, 30, 200, 100); // (x, y, 横幅, 高さ)
</script>「空色（skyblue）」の四角形がキャンバス上に描かれます。
getContext("2d")ってなに？
canvasでは描画用の「道具箱」を使う必要があります。それがこの getContext("2d") です。
const ctx = canvas.getContext("2d");このコードで 「2D描画モード」を使う準備ができ、ctx を通して図形や線を描けるようになります。
よくある注意点
- canvasのサイズは HTMLタグの属性（width/height）で指定するのが基本。CSSだけでサイズ変更すると描画が崩れます。
- JavaScriptのコードは、**canvasよりも後に読み込まれる位置（bodyの下など）**に書くか、
DOMContentLoadedで待ってから実行しましょう。
3.四角形・線・円を描いてみよう
canvasでは、JavaScriptを使ってさまざまな図形を描くことができます。
ここではよく使われる「四角形・線・円」の描き方を紹介します。
四角形を描く（fillRect）
ctx.fillStyle = "tomato"; // 塗りつぶしの色
ctx.fillRect(20, 20, 100, 60); // (x, y, 幅, 高さ)fillStyle で色を設定してから fillRect() で塗りつぶした四角形を描きます。
線を描く（moveTo + lineTo）
ctx.beginPath(); // 新しいパス（線）を開始
ctx.moveTo(50, 50); // 始点
ctx.lineTo(200, 100); // 終点
ctx.strokeStyle = "black"; // 線の色
ctx.lineWidth = 2; // 線の太さ
ctx.stroke(); // 線を描画beginPath() は線を描き始める合図です。moveToで始点を、lineToで終点を指定します。
円を描く（arc）
ctx.beginPath(); // パス開始
ctx.arc(150, 75, 50, 0, Math.PI * 2); // (x, y, 半径, 開始角度, 終了角度)
ctx.fillStyle = "gold"; // 塗りつぶし色
ctx.fill(); // 塗りつぶし円を描くarc() は「円弧」を描くメソッドですが、Math.PI * 2 にすれば「円」になります。
サンプルHTMLにまとめるとこうなる
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 四角形
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 100, 60);
// 線
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();
// 円
ctx.beginPath();
ctx.arc(150, 75, 40, 0, Math.PI * 2);
ctx.fillStyle = "gold";
ctx.fill();
</script>4.色や線のスタイルを変える
canvasでは、描く図形の色・枠線・太さなどを細かく指定することができます。
ちょっとした工夫で、見た目がぐっと変わるのでぜひ覚えておきましょう！
fillStyle：塗りつぶしの色を指定する
ctx.fillStyle = "lightgreen";
ctx.fillRect(20, 20, 100, 60);fillStyleに色名や16進数カラーコード（例：#ff9900）を指定できます。fillStyleは 次に描く塗りつぶしに反映されます。
strokeStyle：線（枠線）の色を指定する
ctx.strokeStyle = "#3333ff";
ctx.strokeRect(150, 20, 100, 60);strokeRect()は 枠線だけ描く四角形です。strokeStyleで線の色を指定します。
lineWidth：線の太さを変える
ctx.beginPath(); // 新しい線（パス）を描き始める
ctx.moveTo(30, 120); // 線の始点を指定
ctx.lineTo(250, 120); // 線の終点を指定
ctx.strokeStyle = "red"; // 線の色
ctx.lineWidth = 5; // 線の太さ（ピクセル単位）
ctx.stroke(); // 実際に線を描く補足：beginPath() とは？
beginPath() は、新しい線や図形の“始まり”を宣言する命令です。
複数の図形や線を描くとき、前の線とつながらないようにリセットする役割を持っています。
もし beginPath() を使わずに lineTo() だけで続けて描くと、前の図形と勝手につながってしまうことがあるので注意しましょう。
globalAlpha：透明度を変える（応用）
ctx.globalAlpha = 0.5; // 50%の透明度
ctx.fillStyle = "orange";
ctx.fillRect(60, 140, 100, 60);globalAlphaを使うと、描画全体の透明度を変えることもできます。0（完全に透明）～1（完全に不透明）の範囲で指定。
カラフルなキャンバスの例
<canvas id="styleCanvas" width="300" height="220" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById("styleCanvas");
const ctx = canvas.getContext("2d");
// 塗りつぶし
ctx.fillStyle = "lightgreen";
ctx.fillRect(20, 20, 100, 60);
// 枠線だけ
ctx.strokeStyle = "#3333ff";
ctx.strokeRect(150, 20, 100, 60);
// 太い赤い線
ctx.beginPath();
ctx.moveTo(30, 120);
ctx.lineTo(250, 120);
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.stroke();
// 半透明のオレンジ四角
ctx.globalAlpha = 0.5;
ctx.fillStyle = "orange";
ctx.fillRect(60, 140, 100, 60);
</script>5.イベントと組み合わせて“動く絵”に挑戦！
canvasは、addEventListener() を使ってユーザーの操作（クリック・マウス移動など）に反応させることができます。
これによって、「ただの絵」から「動く・変化する絵」へと進化します！
クリックで色を変える
まずは、ボタンをクリックするとキャンバスの色が変わる例です。
<canvas id="clickCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
<button id="colorBtn">色を変える</button>
<script>
const canvas = document.getElementById("clickCanvas");
const ctx = canvas.getContext("2d");
const btn = document.getElementById("colorBtn");
btn.addEventListener("click", () => {
ctx.fillStyle = "skyblue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
</script>このコードでは、ボタンをクリックした瞬間に fillRect() でキャンバス全体を塗りつぶしています。
マウスの動きに合わせて円を描く
マウスが動いた位置に円を描く例です。イベントタイプは "mousemove" を使います。
<canvas id="drawCanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById("drawCanvas");
const ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", (event) => {
const x = event.offsetX;
const y = event.offsetY;
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fillStyle = "orange";
ctx.fill();
});
</script>event.offsetX / offsetY は、canvas内のマウス座標を取得します。
補足：イベントで使える代表的な種類
| イベント名 | 内容 |
|---|---|
click | 要素がクリックされたとき |
mousemove | マウスが動いたとき |
mousedown | マウスのボタンが押されたとき |
mouseup | マウスのボタンが離されたとき |
keydown | キーが押されたとき |
6.まとめ
今回は、JavaScriptの canvas を使って、図形の描画やイベントとの連携など、基本的な使い方を一通り紹介しました。
おさらいポイント
<canvas>はHTML上に絵や図形を描ける特別なタグ- JavaScriptで
getContext("2d")を使って描画処理を行う fillRectやarcなどを使って、四角形・線・円を描画できるfillStyleやstrokeStyleで色やスタイルも自由に変えられる- イベント（
clickやmousemove）と組み合わせると動きのある表現が可能に！
canvasは、“描いて遊んで学べる”とても楽しい機能です。
HTMLやCSSだけではできなかった「動く表現」や「ユーザーと反応する画面」を、JavaScriptで作っていきましょう！
コメント