title: how to draw multiple images in canvas
body: <p>I need to draw images in their own canvas. What am I doing wrong?
  If I delete the "for loop" the code works just fine (e.g: set var i=0, then img[0] is drawn in canv[0]).</p>
  
  <pre><code>window.onload = function() {
  
      var canv = [];
      var ctx = [];
      var img = [];
      var info = [{"url":"1.jpg"},{"url":"2.jpg"},{"url":"3.jpg"}];
  
      for(i=0; i&lt; 3; i++){
  
              canv[i]        = document.createElement('canvas');
              canv[i].width  = 460;
              canv[i].height = 620;
              canv[i].style.border = "1px solid";
              document.body.appendChild(canv[i]);
  
              img[i]     = new Image();
              img[i].src = info[i].url;
  
              ctx[i] = canv[i].getContext("2d");
  
              img[i].onload = function(){  
                  ctx[i].drawImage(img[i], 10, 70, 440,440);
              }
      }
  }
  </code></pre>