JavaScript»キャンバス»画像を描くdrawImage 画像を表示してみる

ファイル名: js-canvas/quest_00084.html

下のソースコードをうつして、キャンバスに図のように画像がぞう表示ひょうじしてみましょう。使用する画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

const canvas = document.getElementById("image");
const context = canvas.getContext("2d");

const image = new Image();
image.src = "images/neko.png";
image.onload = function() {
  context.drawImage(image, 60, 40);
};

解説

画像がぞう表示ひょうじするには、画像がぞうファイルの名前なまえ場所ばしょが必要です。ファイルの場所ばしょは、ソースコードファイルのある場所ばしょから見てどこにあるかであらわします。このあらわしかたを「相対そうたいパス」といいます。