title: Looping html2canvas
body: <p>I'm having a bit of trouble trying to implement the html2canvas script in a for loop.</p>
  
  <p>I'm writing a Javascript function that uses an array of data to modify the style of a group of elements, captures the container div as a canvas, converts it into an image, appends it to the document body and then moves on to the next index of the array.</p>
  
  <p>The part where I'm having trouble is at the very end of my loop:</p>
  
  <pre><code>html2canvas(document.getElementById("background"), {
      onrendered: function(canvas) {
          var imgdata = canvas.toDataURL("image/png");
          var obj = document.createElement("img");
          obj.src=imgdata;
          document.body.appendChild(obj);
      }
  });
  </code></pre>
  
  <p>By going through the script step by step I've found that it isn't waiting for the canvas to be rendered before moving on to the next iteration of the for loop, this results in the element I'm trying to capture changing but every image being rendered looking exactly the same (as the final index in the array). </p>
  
  <p>Is there a way to delay the script for a second while the canvas renders? I've tried using <code>setTimeout()</code> and can't seem to find any other ways of delaying the script, I am unfamiliar with how the <code>onrendered</code> part of the code works.</p>
  
  <p>If my explanation is unclear I will prepare some suitable examples soon.</p>