JavaScript»キャンバス»画像を描くdrawImage 画像を縮小(しゅくしょう)して表示してみる

ファイル名: js-canvas/quest_00091.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, 100, 120);
  context.drawImage(image, 60, 160, 100, 120);
  context.drawImage(image, 160, 40, 100, 120);
  context.drawImage(image, 160, 160, 100, 120);
};

解説

よこの大きさ・たての大きさを指定していして、画像がぞうを小さくしたり大きくしたりできます。