【2026】JavaScriptでcanvas要素に図形を描画する方法を解説！

JavaScriptは、Webページに動的な要素を追加するために使われるプログラミング言語です。
そんなJavaScriptとHTMLのcanvas要素を利用すれば、Web上にさまざまな図形やアニメーションを描画できます。

本記事で、JavaScriptを使ってcanvas要素に図形を描画する方法について見ていきましょう。

canvasとは

canvasとは、HTML5から追加されたHTML要素です。canvasタグをHTMLに記述し、JavaScriptで操作することで、2Dや3Dの図形を描画できます。

canvas要素はデフォルトで幅300px、高さ150pxの長方形で作成されます。しかし、タグに直接widthとheightを指定することで、描画範囲は自由に変更可能です。

canvas要素を活用することで、サイトに使うための図形を、別で画像として用意する必要がなくなります。

また、canvasを活用することで簡単なゲーム作成もできます。しかし、本格的なゲームを作りたい場合は、ゲームエンジンを活用するのがおすすめです。

以下の記事では、無料でゲーム開発ができるプラットフォームであるUnityの始め方について解説しています。
インストールの方法から詳しく紹介しているので、ぜひこちらもあわせてご覧ください。

【2024】Unityの始め方を解説！インストールできないときの原因についても紹介

JavaScriptでcanvasを使うための事前準備

JavaScriptでcanvasを使うためには、HTMLとCSS、JavaScriptの事前準備が必要です。
それぞれにどのような準備が必要なのかについて見ていきましょう。

HTMLの準備

JavaScriptでcanvasを使うためには、HTML内にcanvasタグを用意しておく必要があります。今回、HTMLのbodyタグ内に以下のようにしてcanvasタグを記述しました。

タグにつけている属性と値の説明は以下のとおりです。

これにより、JavaScriptでcanvasを操作し、指定したサイズ内で図形やテキストを描画できるようになります。

CSSの準備

canvasタグが設置できたらCSSでスタイルの設定をしておきましょう。今回は、styleタグ内に以下のような設定を行いました。

styelタグはheadタグ内で記述し、その中で入れ子構造にしてスタイルの指定を行います。

今回つけたborderのCSSは必須ではありませんが、上記の記述をすることでcanvasの周りに枠線が表示されるため、描画領域がわかりやすくなります。

JavaScriptの準備

CSSが設定できたら、scriptタグ内にコードを記述していきます。scriptタグはbodyタグの直下に配置するのが一般的です。

まずは、以下の記述でHTML内にあるcanvas要素をJavaScriptで取得しましょう。

「document.getElementById(“canvas”)」は、HTMLドキュメント内にある、id 属性がcanvasの要素を取得するためのメソッドです。この場合、先ほど準備したcanvasタグが対象です。

「const canvas」では、取得したcanvas要素をcanvasという定数に近い変数に代入しています。これにより、後のコードでこの変数を通じてcanvas要素へのアクセスが簡単に行えます。

続いて、以下の記述で2D描画用のコンテキストを取得しましょう。

「canvas.getContext」の引数に「2d」を渡すことで、2Dでの描画ができるようになります。ここまで記述できたらJavaScriptの事前準備は完了です。

canvasにJavaScriptで四角形を描画する方法

準備ができたら、canvasにJavaScriptで四角形を描画していきます。scriptタグの中に以下の記述を追加してみましょう。

「context.fillStyle = “red”;」は図形の塗りつぶしの色を赤に設定する指定です。
「context.fillRect(10, 10, 100, 100);」では、x軸に10px、y軸に10pxの位置に、幅100px、高さ100pxの四角形を描画する指定をしています。

このメソッドはfillRect(x, y, width, height)の形式で使われるため、引数の数値を変えることで好きな位置や大きさで四角形を描画できます。
赤色で塗りつぶされた四角形が描画されていればOKです。

canvasにJavaScriptで三角形を描画する方法

canvasで三角形を描画するにはパスを作成して描画する必要があります。以下の記述で、四角形で追加したコードを書き換えてみましょう。

「context.beginPath();」は、新しいパスの開始を宣言するために必要なメソッドです。

「context.moveTo(100, 100);」では、描画を開始する最初の点の座標を指定しており、「context.lineTo(150, 150);」で、次に線を引く先の座標を指定しています。

「context.lineTo(50, 150);」で、最後の点を指定し、「context.closePath();」でパスを閉じています。
これにより、最初の点と最後の点が自動的に結ばれ、三角形の作成が可能です。

また、「context.fillStyle = “green”;」では、塗りつぶしの色を緑色に指定しており、「context.fill();」で実際に三角形を塗りつぶしています。
三角形は四角形よりも記述が多く複雑ですが、パスを操作できるので自由な形での描画が可能です。

canvasにJavaScriptで文字を描画する方法

canvasを使えば、図形だけでなく文字も簡単に描画できます。三角形で追加したコードを以下のように書き換えてみましょう。

まず、「context.font = “50px Arial”;」で、描画する文字のフォントサイズとフォントファミリーを指定しています。
この例では、フォントサイズが50pxのArialフォントが適用されます。

二行目に書かれている、「context.fillStyle = “blue”;」の指定は文字色の設定です。
この例では、文字を青色で塗りつぶすために、fillStyleに”blue” を指定しています。

「context.fillText(“AAAAA”, 100, 100);」は、実際にcanvas上に文字を描画するメソッドです。

最初の引数では、画面上に表示したい文字列を指定します。
次の引数では、文字の開始位置を示しており、今回はx軸が100px、y軸が100pxの位置に文字が描画されます。

canvas内に「AAAAA」の文字が指定どおりに表示されているか確認しましょう。

canvasを使うときの注意点

canvasを使うときには、以下の点に注意する必要があります。

1. 閉じタグをつける
2. CSSでサイズを変更するとグラフィックが歪む可能性がある

これらの注意点についてみていきましょう。

注意点①閉じタグをつける

canvas要素を使用する際には、必ず閉じタグ（</canvas>）が必要です。
画像を表示するimgタグには閉じタグが必要ないことから、canvasタグの閉じタグも忘れられがちです。

閉じタグがないと見た目が崩れたり、JavaScriptがうまく動作しなかったりするため、閉じタグを必ずつけるようにしましょう。

注意点②CSSでサイズを変更するとグラフィックが歪む可能性がある

canvasのサイズはCSSでも変更できます。しかし、CSSでサイズを変更するとCSSの指定に合わせてグラフィックが拡大・縮小されることから、表示が歪んでしまう可能性があります。

そのため、canvasのサイズを変更する際は、CSSではなくHTMLのwidthとheight属性を使用して直接設定するようにしましょう。

また、サイト制作でHTMLやCSS、JavaScriptを学んでいる方は、Illustratorの勉強も並行して行うのがおすすめです。

サイトを作るには、情報を入力するHTMLと見た目の装飾をするCSS、サイトに動きを付与するJavaScriptのほかに、サイト内に使用するパーツ作成の知識も必要です。

以下の記事では、サイトに使えるロゴやアイコンを作るのに最適なIllustratorの練習方法について紹介しています。Webデザイナー志望の方は、ぜひこちらもあわせてご覧ください。

【2024】イラストレーターはどうやって練習する？練習時のコツも解説

JavaScriptでcanvas要素に図形を描画する方法のまとめ

今回は、JavaScriptでcanvas要素に図形を描画する方法について紹介しました。
canvasは、Webページ上で2D・3Dのグラフィックやアニメーションを描画できる要素です。

四角形や文字などのさまざまな図形を簡単に描画できるため、簡単な図形であれば画像を外部ファイルで用意する必要がなくなります。
図形は四角形や三角形だけでなく、円弧でも描画できるため、慣れてきたら複雑な形にも挑戦してみてください。