解決：在阻止快取的inspect模式下無法drawImage()的問題

• 環境

瀏覽器：版本 57.0.2987.133 (64-bit)
OS:macOS:10.12.3

遇到的問題

昨天做了美圖的前端筆試題，其中一題是給定一張圖片URL，將其畫在canvas上，canvas我是會用的，
但是drawImage這個函式的介面我記不大清了，所以回來我又試了下。後來發現我竟然畫不出來了。

先給出我的示例程式碼

<img  id="myImg" src="img/001.jpg">

<canvas id="myCanvas"  width="200px" height="200px"></canvas>
<script type="text/javascript">
//window.onload=function() {
    var myImage = document.getElementById("myCanvas");
    var cxt = myImage.getContext("2d");
    var img = document.getElementById("myImg");
    console.log(img);
    cxt.drawImage(img, 50, 50);
    cxt.drawImage(img, 125, 125);
    cxt.drawImage(img, 210, 210);
//}
</script>

結果（在inspect模式下）是這樣的：

顯然，這裡只有img,沒有canvas，經過諸多嘗試，仍然未解決，後來我發現，當不用開發者模式訪問圖片，則需要兩次重新整理才能得到canvas:第一次重新整理得到上圖，第二次重新整理得到下圖：

顯然，訪問兩次才能得到canvas，這樣的訪問方式是不正常的，那麼問題出現在哪裡呢？我在stackoverflow上看到了解答：

http://stackoverflow.com/questions/8346418/image-drawn-to-html5-canvas-does-not-display-correctly-on-first-load

這是因為img是非同步載入的啊！！！當圖片已經還沒載入完成，canvas相關的JS程式碼已經在執行了。沒有圖片的drawImage自然是不能成功的。

所以正確的辦法是onload:

<img  id="myImg" src="img/001.jpg">
<canvas id="myCanvas"  width="200px" height="200px"></canvas>
<script type="text/javascript">
window.onload=function() {
    var myImage = document.getElementById("myCanvas");
    var cxt = myImage.getContext("2d");
    var img = document.getElementById("myImg");
    console.log(img);
    cxt.drawImage(img, 50, 50);
    cxt.drawImage(img, 125, 125);
    cxt.drawImage(img, 210, 210);
}
</script>