context.drawImage 行为异常

I have:

<canvas id='canvas' width="300" height="409" style="border:2px solid darkblue" >
</canvas>

进而：

<script type="text/javascript">
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var image = new Image();
  image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG';
  alert(image.src);
  context.drawImage(image, 0, 0, 300, 400);
</script>

在 IE 10 中，图像被绘制为“预期的”。然而，当我删除该警报声明时，图片并未被绘制！

在 Chrome 中，无论是否有警报语句，我的本地 PC 上都不会绘制任何图像。

可能会发生什么？小提琴是here

这是因为加载图像是一个异步操作。警报调用可帮助浏览器等待一段时间，以便完成图像加载。因此，该图像将在drawImage接下来。

实现此目的的正确方法是这样使用代码：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image(); //document.createElement('img'); for Chrome due to issue

// add a onload handler that gets called when image is ready
image.onload = function () {
    context.drawImage(this, 0, 0, 300, 400);
}

// set source last so onload gets properly initialized
image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG';

onload 回调中的绘制操作可以很容易地成为函数调用：

image.onload = nextStep;
// ...

function nextStep() {
    /// draw image and other things...
}