解决：在阻止缓存的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>