title: Why doesn't image show on load, but shows on refresh?
body: <p>I'm playing with the canvas element in HTML5 and I have noticed a peculiar behavior.  On initial load, an image I'm displaying does not show. However, when I refresh the browser, it displays appropriately.  I've used IE9 and Chrome. Both behave identically.  The JavaScript code looks like this:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>The rectangle draws correctly both times, it's the smiley that only shows on a browser refresh.</p>
  
  <p>I'm in the process of learning HTML5 and JavaScript.  I'm sure I'm just doing something stupid, but I can't figure it out.  </p>