Image Drawn To Html5 Canvas Does Not Display Correctly On First Load

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 circl

Solution 1:

The circle is probably not showing up because you are drawing it before the image is loaded. Change your last statement to:

// Lets not init until the image is actually done loading
topMap.onload = function() {
  init();
}

The reason it works after you hit refresh is because the image is now pre-loaded into the cache.

You always want to wait for any images to load before you attempt to draw them or nothing will show up on the canvas instead.