15puzzle.pngの画像が表示されません

VSC上では画像が開くことを確認しました。
Windows使用です。
コードはHTML、JSとも間違いがないことを確認しました。
どこが間違って開かないのか教えてください。
よろしくお願いいたします。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>15Puzzle</title>
<style>
canvas {
background: pink;
display: block;
margin: 0 auto;
cursor: pointer;
}
</style>
</head>
<body>
<canvas width="280" height="280">
Canvas not supported.
</canvas>
<script src="js/main.js"></script>
</body>
</html>

JavaSvript
'use strict';

(() => {
class Puzzle {
constructor(canvas) {
this.canvas = canvas;
this.ctx = this.canvas.getContext('2d');
this.img = document.createElement('img');
// this.renderTile(9, 2, 1);
this.renderTile(12, 1, 3);
}

renderTile(n, col, row) {
this.img.src = 'img/15puzzle.png';
this.img.addEventListener('load', ()=> {
this.ctx.drawImage(
this.img,
(n % 4) * 70, Math.floor(n / 4) * 70, 70, 70,
col * 70, row * 70, 70, 70
);
});
}
}
const canvas = document.querySelector('canvas');
if (typeof canvas.getContext === 'undefined') {
return;
}

new Puzzle(canvas);
})();

ドットインストール - 3分動画でマスターできるプログラミング学習サービス

このレッスンの質問と回答（1）

この質問のレッスン

サービスメニュー

ご利用にあたって

ソーシャルメディア

更新情報