& Lt; canvas & gt; The drawImage () method cannot display images,

<Canvas> the drawImage () method cannot display images,

As shown in the book, use <canvas> to draw an image and try it. At the beginning, my code is as follows:

<! DOCTYPE html> Unfortunately, there is only one black box in the browser with no images. I checked whether the image path is correct, the browser version is supported, and the Console does not report an error. It is not scientific. Then I went to w3school to check the drawImage () method and the sample code. After reading the sample code, I copied it and changed the image to my local image, however, it is useless and still not displayed. So I went to the Internet to check the cause.
<script>window.onload=function(){var drawimg = document.getElementById("drawimg");var image=document.getElementById("image");var context = drawimg.getContext("2d");context.drawImage(image,10,10); }</script>
This is the modified js code. I put the original code in onload, and the picture is displayed in the browser. Because the image is asynchronously loaded, the onload event occurs immediately after the page or image is loaded. In the previous code, the drawImage () method is called before the image is loaded successfully when the js code is executed, so the image cannot be displayed.