Canvas APIで図形や画像を描画する方法

この記事は、ラクスパートナーズ AdventCalendar 2025の18日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）

---

今回はCanvas APIについて紹介していきたいと思います。

概要

HTMLのcanvas要素とCanvas APIを用いることで、図形やテキスト、画像をcanvas要素上に表示することができます。
（今回は2Dでの図形、テキスト、画像表示方法をご紹介します）

使い方

HTML

<canvas id="canvasId" width="400" height="400"></canvas>

JavaScript

const canvas = document.getElementById("canvasId");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

CSS

#canvasId {
  border: 1px solid #000;
}

以下のような処理の流れとなっています。

1. canvas要素を用意する

まずは、HTML側でcanvas要素を用意します。

canvas要素のデフォルトの大きさは
width: 300px
height: 150px
です。

CSSからでもサイズ変更できますが、画像を描画する際にはそのレイアウト上の大きさに合わせて拡縮されます。CSSではcanvas要素の比率を考慮しないため、canvas上で表示される画像が歪んで表示される可能性があります。

そのため、canvas要素の大きさは、width属性とheight属性から変更した方が良さそうです。

2. JavaScript側でcanvas要素を取得する

サンプルコードでは
const canvas = document.getElementById("canvasId");
で取得しています。

3. 描画コンテキストを取得する

const ctx = canvas.getContext("2d");
で描画コンテキストを取得します。

描画コンテキストを使うことで、図形、テキスト、画像をcanvas要素上に描画することができます。

getContext(contextType, contextAttributes)

contextTypeには、描画コンテキストの種類を指定します。以下の値があります。

• 2d： 2次元の図形を描画することができます
• webgl： WebGL version 1 (OpenGL ES 2.0) が実装されているブラウザで、3次元の図形を描画することができます
• webgl2： WebGL version 2 (OpenGL ES 3.0)が実装されているブラウザで、3次元の図形を描画することができます
• webgpu： WebGPU API を実装しているブラウザで、3次元の図形を描画することができます
• bitmaprenderer： 指定されたImageBitmapRenderingContextでcanvas要素の内容を置き換える機能のみを提供します

contextAttributesには様々なオプションを指定することができます。
種類が多いので、詳細は以下からご確認お願いします。

4. 図形を描画する

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

手順3で取得した描画コンテキストを使って、図形を描画します。
以下のような関数があります。

fillRect(x座標, y座標, width, height)

指定した色で塗りつぶされた長方形を描きます。

それぞれの引数に指定できる値は以下となっています。

• x座標とy座標で図形を描画する始点
• widthとheightで図形の大きさ

strokeRect(x座標, y座標, width, height)

枠のみの長方形を描きます。

clearRect(x座標, y座標, width, height)

指定された領域を消去します。

fillText(表示するテキスト, x座標, y座標, maxWidth)

canvas要素内でテキストを表示できます。
maxWidthには横幅の上限を指定します。テキストが横幅をはみ出る場合、納まるようにテキストは縦長で表示されます。

描画コンテキスト.font

以下のように文字サイズとフォントを指定することができます。
ctx.font = "50px Arial";

描画コンテキスト.fillStyle

描画する長方形やテキストの色を決めることができます。
デフォルトは黒(#000)です。

ctx.fillStyle = "blue";

画像の合成

先ほどは図形の描画をご紹介しましたが、画像を描画することもできます。
（Vueで例を書いていきます）

<script setup>
import { onMounted } from 'vue';
import GuruGuru from '../assets/img/guruguru.png';
import Bear from '../assets/img/bear.png';

onMounted(() => {
  const canvas = document.getElementById("canvasId");
  const ctx = canvas.getContext("2d");

  const img1 = new Image();
  img1.src = GuruGuru;

  const img2 = new Image();
  img2.src = Bear;

  img1.onload = () => {
    ctx.drawImage(img1, 0, 0, 150, 150);
  };

  img2.onload = () => {
    ctx.drawImage(img2, 150, 0, 150, 150);
  };
})
</script>

<template>
  <div>
    <canvas id="canvasId" width="300" height="150"></canvas>
  </div>
</template>

<style scoped>
#canvasId {
  border: 1px solid #000;
}
</style>

処理の流れとしては以下のイメージです。

1. Imageオブジェクトでimg要素を生成
2. 生成したimg要素のsrc属性に画像のパスを指定
3. 画像が読み込まれたら drawImage関数で画像をcanvas要素に描画

const img = new Image();
img.src = '画像のパス';

img.onload = () => {
    ctx.drawImage(img1, 0, 0, 150, 150);
};

drawImage(生成したimg要素, x座標, y座標, width, height)
の形式で記述します。
こちらも長方形を描画した時と同じような使い方になっています。

• x座標とy座標で描画する際の始点を決める
• widthとheightで画像の表示サイズを決める

canvasのダウンロード

canvas要素を画像としてダウンロードすることもできます。

const downloadImage = () => {
  const canvas = document.getElementById("canvasId");
  const link = document.createElement("a");
  link.href = canvas.toDataURL("image/png");
  link.download = "canvas_image.png";
  link.click();
};

toDataURL(type, encoderOptions)

type引数で指定した形式で画像を表現したものが入ったデータURLを返します。

type

画像データの形式を決めます。デフォルトはimage/pngですが、ブラウザが対応していればimage/jpegやimage/webpも指定できます。

encoderOptions

作成する画像が非可逆圧縮（image/jpegやimage/webpなど）だった場合の画像の品質を指定します。
0 から 1 の間の数値が入り、数値が高いほど高画質になります。

---

以上となります。

今回はCanvas APIの基本的な使い方をご紹介しました。
ここまで読んでいただき、ありがとうございました。