HTML5 drawImage 使用问题

最近在看HTML5，首次使用Image就遇到了问题；直接看代码：

<canvas width="800" height="600" id="mycanvas" style="border: 1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var can = document.getElementById("mycanvas");
var cxt = can.getContext("2d");
var img = new Image();
img.src = "cars.png";
cxt.drawImage(img, 50, 50);
</script>

 在网上查了使用drawimage的方法基本上都是类似上面代码，包过一些Html5方面的数，实际上只要一刷新图片就不显示出来。要想保证刷新正常显示需要在Image onload的时候重绘一次才行

<canvas width="800" height="600" id="mycanvas" style="border: 1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var can = document.getElementById("mycanvas");
var cxt = can.getContext("2d");

var img = new Image();
img.src = "cars.png";
img.onload = function () {
cxt.drawImage(img, 50, 50);
}
</script>

测试在chrome 19下