HTML5 canvasの基本と描画の始め方｜図形描画からアニメーションまで解説

絵をパソコンやスマホの画面に動かしたいときって、どうやって作るのか気になりますよね。

そんなときに使えるのが、HTML5のcanvasという便利なしくみです。

この記事では、HTML5 canvasの基本と描き方の始め方について、とてもやさしくわかりやすく説明していきます。

canvasのことがわかるようになると、自分で図形を描いたり、アニメを動かしたり、ゲームを作ることもできるようになります。

絵を描くのが好きな人も、プログラミングをやってみたい人も、ぜひ最後まで読んで試してみてください。

HTML5 canvasとは？基本をわかりやすく解説

canvas要素の役割と特徴

HTML5のcanvas要素は、ブラウザ上でグラフィックや図形を描くことができる仕組みです。

画像編集ソフトのように、線や四角、文字などを自由に描けます。

canvasはとても軽くて、ゲームやアニメーション、グラフなど動きのある表現を作りたいときに役立ちます。

以下のような特徴があります。

これらの特徴により、canvasは今ではWeb開発でとても重要な技術のひとつになっています。

HTML5でのcanvasの書き方

canvasを使うには、まずHTMLの中にcanvasタグを入れます。

これは描画エリアを用意するためのものです。

とてもシンプルに使えます。

例えば、こんなふうに書きます。

<canvas id="myCanvas" width="300" height="150"></canvas>

このコードは、幅300ピクセル、高さ150ピクセルのキャンバスを作っています。

その中に線や文字などを描くことができます。

JavaScriptを使えば、以下のように描画できます。


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);


この例では赤い四角が描かれます。

canvasの使い方はとても直感的でわかりやすいです。

canvasが注目される理由

canvasがたくさんの人に使われているのは、自由な表現ができて高速だからです。

とくに動きのある表現が求められる今のWebでは、とても重宝されています。

canvasが注目されている理由には、次のような点があります。

このようなメリットがあるので、canvasは多くのWebサービスやアプリで使われているのです。

SVGとの違いとは

canvasと似たものにSVGという技術があります。

どちらも図形を描けますが、それぞれに得意・不得意があります。

ここではcanvasとSVGの違いを見ていきましょう。

主な違いは以下の通りです。

どちらを使うかは用途に応じて選ぶことが大切です。

canvasを使う上での注意点

canvasはとても便利ですが、使うときにはいくつか注意するべきことがあります。

初心者の人でもつまずきやすいポイントを押さえておきましょう。

注意点は次のようになります。

これらのポイントに気をつけながら使えば、canvasをもっと上手に活用できます。

対応ブラウザと互換性の確認

canvasはHTML5の標準技術なので、今のブラウザならほとんど対応しています。

でも、古いブラウザでは動かないこともあるので注意が必要です。

対応状況を知っておくと安心です。

canvasを使う前には、自分の作りたいものがターゲットのブラウザで正しく動くかを確認しておきましょう。

canvasを使うための基本知識

canvasをしっかり使うには、基本的な用語や仕組みを知っておくことが大切です。

特に初めての人は、「描画コンテキスト」や「パス」などの言葉に慣れておくと、スムーズに学べます。

ここでは覚えておきたいポイントを紹介します。

こうした基本を知っていれば、canvasを使って自分だけの描画ができるようになります。

HTML5 canvasで描画を始める準備

canvas要素の設置方法

canvasを使って絵や図を描くには、まずHTMLの中にcanvas要素をしっかり設置することが大切です。

canvasはただの空白の箱のようなもので、何も描かなければ何も見えません。

設置が正しくないと、JavaScriptで描こうとしてもうまくいかないので注意しましょう。

canvas要素は次のように書きます。

<canvas id="myCanvas" width="400" height="200"></canvas>

ここで使うポイントをまとめます。

まずはこのcanvas要素が正しく表示されているかを確認することがスタートラインです。

JavaScriptとの連携手順

canvasで実際に何かを描くためには、JavaScriptとしっかり連携させる必要があります。

HTMLだけでは何も描けないので、JavaScriptを使って「どこに、何を、どうやって描くか」を命令する必要があります。

連携の基本の流れは以下のとおりです。


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 50);


ここでのポイントを確認しましょう。

このようにして、JavaScriptとcanvasをつなげることで自由な描画が可能になります。

getContextで描画コンテキストを取得

canvasの描画では「コンテキスト」と呼ばれる特別なオブジェクトを使います。

これは、canvasの中で何をどう描くかを決める指揮者のような存在です。

JavaScriptでこのコンテキストを取得しないと、描画は始まりません。

描画コンテキストの取得方法はとても簡単です。


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


このようにして得られるctxが、すべての描画命令のスタート地点になります。

コンテキストに関する基本情報をまとめます。

コンテキストの仕組みを理解することで、canvasをもっと自由に使えるようになります。

描画エリアのサイズ指定

canvasを設置したら、次に描く場所の広さを決めなければなりません。

この広さのことを「描画エリアのサイズ」と呼びます。

サイズが小さいと描いた絵が切れてしまいますし、大きすぎると無駄になります。

サイズ指定には2つの方法があります。

HTMLで書く例：

<canvas width="400" height="300"></canvas>

JavaScriptで書く例：


canvas.width = 400;
canvas.height = 300;


サイズは描画の基本なので、正確に指定しておくことがとても大事です。

基本的なエラーチェック方法

canvasを使うときには、思った通りに動かないこともよくあります。

そんなときのために、エラーチェックの方法を覚えておくと安心です。

初歩的なミスでも、気づかずに時間を無駄にしてしまうことがあるので要注意です。

よくあるエラーとそのチェックポイントを紹介します。

小さな確認で大きなトラブルが防げるので、常に確認しながら進めることが大切です。

初期化やクリア処理の実装

canvasでは、何度も描き直すときに前の絵が残ってしまいます。

そんなときにはキャンバスを初期化（リセット）する必要があります。

これはとても重要な処理です。

クリア処理の基本コードは以下の通りです。

ctx.clearRect(0, 0, canvas.width, canvas.height);

これでcanvas全体をまっさらにすることができます。

初期化のポイントは次の通りです。

クリア処理がうまく使えると、canvasの使い方が一段とレベルアップします。

レスポンシブ対応のポイント

canvasはデフォルトでは固定サイズですが、スマホやタブレットにもきれいに対応させるには工夫が必要です。

画面サイズに合わせて描画内容を調整することで、見た目も使い勝手も良くなります。

レスポンシブ対応の考え方を紹介します。

これらの対応をすることで、どんな画面でも見やすいcanvas表現が実現できます。

canvasで描ける基本的な図形と描画方法

線を描く（lineTo・moveTo）

canvasで絵を描くとき、まず覚えたいのが「線の描き方」です。

線は絵の基本です。

人や建物、星の形など、ほとんどの図形が線からできています。

JavaScriptではmoveToでスタート地点を決めて、lineToで線を引きます。

次のようなコードで描くことができます。


ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.stroke();


線を描くときの基本のポイントは次の通りです。

この基本を覚えるだけで、いろんな線を自由に引けるようになります。

線を操れるようになると表現力がぐんと広がります。

矩形を描く（fillRect・strokeRect）

四角い図形を「矩形（くけい）」といいます。

canvasで四角を描くには、fillRectまたはstrokeRectを使います。

fillRectは塗りつぶし、strokeRectは枠だけを描きます。

以下のように使います。


ctx.fillStyle = "green";
ctx.fillRect(20, 20, 100, 60);
ctx.strokeStyle = "blue";
ctx.strokeRect(20, 100, 100, 60);


矩形の描き方のポイントをまとめます。

矩形はレイアウトやボタン、背景などに使えて、とても便利な基本パーツです。

円や円弧を描く（arc）

canvasでは、丸い形も描くことができます。

円や円の一部を描きたいときは、arcという関数を使います。

arcは少しむずかしそうに見えますが、基本を覚えればすぐに使えます。

次のように書きます。


ctx.beginPath();
ctx.arc(150, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "orange";
ctx.fill();


arcで指定するのは以下の6つです。

丸や弧が描けると、顔やタイマー、グラフなど表現の幅が大きく広がります。

テキストの描画（fillText・strokeText）

canvasには文字も描けます。

テキストを使うと、説明やタイトル、数字などを絵の中に入れられます。

fillTextは塗り文字、strokeTextは枠文字を描くための関数です。

基本の書き方はこうなります。


ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.fillText("こんにちは", 50, 100);
ctx.strokeText("ふち文字", 50, 150);


テキストの描き方で大事な点をまとめます。

テキストを使えば、絵に情報を加えることができてとても便利です。

色やスタイルの設定方法

canvasでは、描いたものの色や太さなどを細かく指定できます。

見た目を変えることで、印象を大きく変えることができます。

fillStyleやstrokeStyle、lineWidthなどを使って設定します。

設定の主な方法は次の通りです。

色やスタイルを上手に使えば、ただの図形もおしゃれで見やすくなります。

パスの操作と塗りつぶし

パスとは、canvasで描く線や図形の「通り道」のようなものです。

パスを使うことで、もっと自由で複雑な図形が描けます。

描いたパスは塗ったり、なぞったりして完成させます。

基本の流れをコードで見てみましょう。


ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 150);
ctx.closePath();
ctx.fillStyle = "pink";
ctx.fill();


パスの基本的な使い方をまとめます。

パスを使えば、自分だけのオリジナルな形も簡単に作れます。

描画順と重なりの管理

canvasでは、描いた順番がとても大事です。

あとから描いたものは前に表示され、最初に描いたものは後ろに隠れてしまうこともあります。

これを「描画順」や「重なり順」といいます。

順番をうまくコントロールするためのポイントを紹介します。

順番を意識して描けば、きれいで見やすいcanvasアートを作ることができます。

実用的なHTML5 canvasの活用方法

アニメーションの基本とフレーム制御

canvasでは、絵を少しずつ変えて何回も描き直すことで、アニメーションを作ることができます。

これは「フレーム制御」と呼ばれるテクニックで、1秒に何十回も絵を描いて動いているように見せる仕組みです。

JavaScriptのrequestAnimationFrameを使えば、なめらかで軽いアニメーションが作れます。

基本の書き方の一例です。


function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
x += 2;
ctx.fillRect(x, 50, 50, 50);
requestAnimationFrame(draw);
}
draw();


アニメーションの基本ポイントをまとめます。

この方法を使えば、ゲームや動くアイコン、パラパラ漫画のような表現も簡単に作れます。

画像の読み込みと描画

canvasでは、自分のパソコンやWeb上にある画像も読み込んで表示できます。

これはImageオブジェクトを使って行います。

絵の上に画像を重ねたり、画像を切り取って使ったりもできます。

画像を読み込んで描く基本のコードはこうなります。


const img = new Image();
img.src = "sample.jpg";
img.onload = function() {
ctx.drawImage(img, 50, 50, 100, 100);
};


画像描画の基本ポイントを見てみましょう。

画像を使うとよりリアルでわかりやすい表現ができるようになります。

インタラクティブなUIの実装

canvasは、ただ絵を描くだけでなく「インタラクティブ」つまり見る人の動きに反応するUIも作ることができます。

マウスの動きにあわせて線が描かれたり、クリックで色が変わったりするような仕組みを作るには、イベントを使います。

以下はマウスに反応する簡単なコードです。


canvas.addEventListener("mousemove", function(e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(e.offsetX, e.offsetY, 30, 30);
});


インタラクティブなUIを作るための基本は以下の通りです。

この仕組みを使えば、見て触って楽しめるコンテンツが作れます。

イベント処理とユーザー操作

canvasを使って作るアプリやゲームでは、ユーザーがクリックしたりキーを押したりする操作に反応することがとても大切です。

イベント処理はその「反応」を作る仕組みです。

JavaScriptのイベントリスナーで簡単に追加できます。

イベント処理で使える主な操作を紹介します。

イベントの使い方の基本はこのようになります。


document.addEventListener("keydown", function(e) {
if (e.key === "ArrowRight") {
x += 10;
}
});


イベントを使いこなすと、操作できるインターフェースが作れて、ユーザーの体験がぐっとよくなります。

ゲームやビジュアライゼーションへの応用

canvasを使えば、本格的なゲームや、データをわかりやすく見せる「ビジュアライゼーション」も作れます。

動き、色、図形を組み合わせれば、難しいデータも小学生でもわかるように見せることができます。

ゲームやビジュアライゼーションで使う技術を整理します。

これらを組み合わせることで、楽しくてわかりやすいツールやゲームが作れます。

他のAPIやライブラリとの連携

canvasは単体でも便利ですが、他のライブラリやAPIと組み合わせることで、もっとすごいことができます。

たとえば音や動画を使ったり、AIやネットと連携したりすることも可能です。

組み合わせると便利な例を挙げます。

このように連携することで、canvasは単なる絵だけでなく、未来的な体験を作るための強力な道具になります。

パフォーマンス最適化のポイント

canvasで動きのあるコンテンツを作ると、動作が重くなることがあります。

スムーズに動かすには「パフォーマンスの最適化」が大切です。

軽く、速く、止まらないように工夫する必要があります。

最適化するための工夫をまとめます。

こうした工夫をすることで、快適でストレスのない動きをユーザーに届けられます。

まとめ

HTML5のcanvasを使うと、絵を描いたりアニメを動かしたり、ゲームを作ったりと、とても楽しいことができます。

今回の記事では、基本から実用的な使い方までをわかりやすく紹介しました。

ここで大事なポイントをもう一度かんたんにまとめます。

さっそく自分でもcanvasを使って、いろいろな図形や動く作品を作ってみましょう。

試しているうちに、きっと楽しくなってくるはずです。