やってみたら直感的にできなかったので少し調べました。
メモとして残しておきます。
index.html
<html>
<body>
Test<br />
<canvas id="canvas"></canvas>
</body>
<script>
const canvas = document.getElementById("canvas");
let imagePath = "image.png";
draw(canvas,imagePath);
function draw(canvas,imagePath){
console.log("draw");
const image = new Image();
image.addEventListener("load",function (){
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
console.log("load!");
});
image.src = imagePath;
}
</script>
</html>
idがcanvasのcanvasタグ内にimage.pngを表示させます。
試す場合は、index.htmlと同じ場所にimage.pngを適当な画像で準備してください。
addEventListenerはonloadでも問題ないですが、個人的にはaddEventListenerの方が馴染みがあるのでaddEventListenerを使っています。