title: loop to create multiple canvas with multiple images not always displaying images
body: <p>this may be an odd one to explain:
  I want to create dynamically a collection of canvas that will have a single image in it. And this displays (after much hassle and getting rid of the onload event) but when I try to refresh the page I sometimees get nothing on the screen.
  And when I was using thee onload event (to wait until the image is loaded) it would not display or display everything in the last canvas.</p>
  
  <p>Here is a snippet of the code:</p>
  
  <pre><code>var sources = []//the array that contains the images
  var divCanvas = document.getElementById('showcase-wrapper')
  for(var i=0; i&lt;sources.length; i++){
      img =  new Image()
      img.src = sources[i]
      canvas  = document.createElement('canvas')
      $(canvas).attr('id', i)
      canvas.height=300
      canvas.width=200
      var context = canvas.getContext('2d');
      //onload commented out allows expected display
      //img.onload = function() {
      context.drawImage(img, 0, 0);
      //} 
      divCanvas.appendChild(canvas)
  }
  </code></pre>
  
  <p>I have seen many posts that seemed to look like mine and tried quite a few but to no avail.</p>