zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript canvas要素にimg要素の画像を表示する

canvas要素にimg要素に表示している画像を表示させる方法を紹介します。

以下のようにimg要素とcanvas要素があるとします。

<img id="img" src="画像URL" onload="setImage" />
<canvas id="canvas"></canvas>

img要素にはonchangeイベントを定義して、画像が読み込まれたタイミングでcanvasに表示させるsetImageファンクションを実行します。

setImageファンクションは以下のようになります。

以下の例ではcanvasのサイズを800×600で設定しています。

function setImage() {
  const ctx = document.getElementById('canvas').getContext('2d');
  ctx.clearRect(0, 0, 800, 600); // canvasをクリア
  ctx.drawImage(image, 0, 0, 800, 600); // 画像を設定
}


関連記事