title: Image drawn to HTML5 Canvas does not display correctly on first load
body: <p>I'm following a tutorial on importing and displaying images on an HTML5 canvas. Everything works fine, until I try to change the image itself. For example, I'll have a yellow circle as my image, and the script works fine. But if I open the image itself in Paint and change the circle to red, and refresh the page, the circle won't show up until I click or refresh again a second time manually. Here is the code snippet I'm using:</p>
  
  <pre><code>var topMap = new Image();
  topMap.src = "topMap.png";
  
  function drawMap() {
      context.clearRect(0, 0, WIDTH, HEIGHT);
      context.drawImage(topMap, 0, 0);
  }
  
  function init() {
      drawMap();
  }
  
  init();
  </code></pre>