Почему изображение не отображается при загрузке, но отображается при обновлении?

Я играю с элементом холста в HTML5 и заметил странное поведение. При начальной загрузке изображение, которое я показываю, не отображается. Однако, когда я обновляю браузер, он отображается соответствующим образом. Я использовал IE9 и Chrome. Оба ведут себя одинаково. Код JavaScript выглядит так:

window.onload = load;
function load() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.fillRect(0, 0, 640, 400);
    var image = new Image();
    image.src = "Images/smiley.png";
    context.drawImage(image, 50, 50);
}

Прямоугольник отрисовывается правильно оба раза, это смайлик, который появляется только при обновлении браузера.

Я изучаю HTML5 и JavaScript. Я уверен, что делаю что-то глупое, но не могу этого понять.