HTMLの学習を始めると、よく見かけるのがcanvas（キャンバス）です。画像（<img>）と似ているように見えますが、canvasは「画像を置く」のではなく、ブラウザ上に“描画用の白紙（領域）”を用意し、JavaScriptで線や図形を描く仕組みです。
この記事では、canvasの基本を、初心者がつまずきやすいポイントとセットで解説します。
canvas要素とは
canvas（キャンバス）は、本来「絵を描くための布・画用紙」の意味です。HTMLの<canvas>も同じで、Webページ上に絵を描くための四角いスペースを用意する要素です。
大事なのは次の2点です。
- <canvas>は“場所（枠）を作るだけ”で、置いただけでは何も表示されません。
- 線・図形・文字などを描くには、JavaScriptから描画命令を出します。
つまりcanvasは、「HTMLで描画エリアを置く」→「JavaScriptでその中に描く」という役割分担です。
canvasでできること
「結局、何ができるの？」をプログラミング学習目線で具体化すると、まずは次のようなものが作れます。
- 座標の理解：クリックした位置に点を描く（x,yが体感で分かる）
- 図形描画：四角形・円・線を描く（APIの基本操作）
- アニメーション：図形を動かす（繰り返し処理の理解）
- 当たり判定の入門：動く四角形が壁で跳ね返る（条件分岐がつながる）
- 入力の理解：マウスイベントで操作する（イベント処理の基礎）
一方で、canvasは描いた内容が「ピクセル（ビットマップ）」として扱われやすく、文章やボタンのようなUI（アクセシビリティが必要な要素）には不向きな場面もあります。UIは基本的にHTMLで作り、canvasは「描画が必要な部分」に絞るのが実務ではよくある考え方です。
canvasにおけるHTML/CSS/JavaScriptの役割分担
- HTML：canvasの置き場所（要素）を作る
- JavaScript：canvasに「何をどう描くか」を命令する
- CSS：canvas要素の見た目（余白、枠線、配置など）を整える（ただし描画内容そのものは変わらない）
初心者が混乱しやすいのは、「CSSでwidth/heightを変えた＝描画領域も増える」と思い込むことです。canvasには“描画の解像度（座標の広さ）”と“表示サイズ”があり、CSSで触っているのは主に後者です。
Canvasの図形の基本
canvas学習で遠回りしやすいのは、いきなり複雑な絵を描こうとすることです。まずは図形の基本セットを揃えるのが近道です。
四角形
canvasで最初に覚えたいのが四角形の描画です。基本となるのは次の3つで、これだけでもcanvasの扱い方がかなり見えてきます。
- fillRect(x, y, w, h)：塗りつぶしの四角形を描く
- strokeRect(x, y, w, h)：枠線のみの四角形を描く
- clearRect(x, y, w, h)：指定した範囲を消す
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillRect(10, 10, 80, 50);
ctx.clearRect(25, 25, 20, 15);
ctx.strokeRect(120, 10, 80, 50);
線・多角形
線や多角形を描く場合は、パス（path）という考え方を使います。beginPath()で新しい線の描画を始めるのがポイントで、これを忘れると以前の線とつながってしまうため、初心者がつまずきやすい部分です。
const ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.lineTo(120, 120);
ctx.lineTo(70, 170);
ctx.closePath();
ctx.stroke();
円
円や円弧はarc()を使って描きます。角度はラジアンで指定するため、最初は「2π（Math.PI * 2）で一周」と覚えておけば問題ありません。
const ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
ctx.arc(220, 140, 30, 0, Math.PI * 2);
ctx.stroke();
初心者がつまずきやすい3つのポイント
1) <canvas>は閉じタグが必要
<canvas>は必ず</canvas>で閉じます。閉じ忘れると、以降のHTMLが「canvasの中身（代替コンテンツ）」扱いになって表示が崩れることがあります。
2) width/heightは「属性」で決める（CSSだけで拡大しない）
canvasの描画領域（座標系）はwidth/height属性で決まります。CSSのwidth/heightは「見た目のサイズ」を変えるだけなので、描画が引き伸ばされてぼやけたり歪んだりしやすいです。
3) まずgetContext(“2d”)が取れているか確認する
描画するにはコンテキスト取得が必要です。取得できない＝描画命令が実行できないので、最初はここで詰まりがちです。まずは「要素が取れているか」「実行タイミングがDOMの後か」を疑うのが定石です。
HTMLの学習に行き詰まったら
Canvasは「小さなズレ」や「前提の取り違え」で時間が溶けやすい分野です。独学で頑張るのは良い選択ですが、行き詰まったときは短時間で詰まりを解消したほうが、結果的に学習が続きやすくなります。
もし次のどれかに当てはまるなら、忍者CODEの無料相談にぜひご参加ください。
- 「表示されない」の原因が分からず、同じところで止まっている
- 本を見ながらコードを勉強しているが、身についている感じがしない
- 何を作ればよいか分からず、学習計画が立てられない
- コードは動くが、読みやすさや設計に自信がない
こうした「独学で起きがちなつまずき」を前提に、プロのメンターがスクールに通った場合どのようなサポートで解消できるのかをご説明します。
- なぜ独学では同じところで止まりやすいのか
- スクールではどのタイミングで、どんなサポートが入るのか
- 一人で悩み続けなくて済む学習環境とは何か
「このまま独学を続けて大丈夫か」「スクールに通うと何が変わるのか」を整理する場として、まずは無料相談をご活用ください！
＼満足度90%以上！／
