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); // 画像を設定
}