javascriptでcanvas上に画像を描画するときの初心者メモ

最近ふと思い立ってjavascriptを特に勉強せず，適当に書いています．
そのうち，ちゃんとした入門書を読もうと考えています．

今のところcanvasで図形描くことしかやってません．
ブラウザは普段ChromeとFirefoxを使っているのですが，画像をcanvas上に描画するところで，ちょっと動作が違った(というより書き方が悪かった)ので，後で自分が勉強し直すとき用のメモを残します．

onload = function() {
    draw();
};
function draw() {
    var canvas = document.getElementById('hoge');
    if( !canvas || !canvas.getContext ) return false;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = "img.png";
    ctx.drawImage(img, 0, 0);
}

最初Firefoxで動作を確認しながら見ていたので，これでも画像がcanvas上に描画されてました．
ところが，Chromeだと何も表示されず，ただ真っ白(画像が表示されない状態)になってました．

調べたら，drawImage()する際に，画像がloadし終わる前だとダメみたいです．
次のように書くと，loadが終わったらdrawImage()するように出来るらしいです．

onload = function() {
    draw();
};
function draw() {
    var canvas = document.getElementById('hoge');
    if( !canvas || !canvas.getContext ) return false;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = "img.png";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    }
}

IEだとこれでもダメっぽくて，他にもいろいろ足すようです．(http://www.html5.jp/canvas/how6.html)
下のような感じになるみたいですが，Chromeとかだとうまく動作しなかったので，また暇な時に調べ直したい．

onload = function() {
    draw();
};
function draw() {
    var canvas = document.getElementById('hoge');
    if( !canvas || !canvas.getContext ) return false;
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = "img.png?" + new Date().getTime();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    }
}