canvasに画像を表示する #HTML

やってみたら直感的にできなかったので少し調べました。
メモとして残しておきます。

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を使っています。