title: how to download multiple images onload using javascript?
body: <p>I am trying to make changes to multiple images, I'm drawing images on separate canvases, and modifying the pixels and then I want to download them after the modification. 
  I have a function that converts canvases to images, and I save all my new canvases in an array. 
  when I try to iterate over the array and download each canvas, only the last image is actually downloaded, not all of them, even though all of them actually exist in my array, I've checked that in Chrome console after loading the web page.
  this is my code for downloading the images : </p>
  
  <pre><code>for (i = 0; i &lt; numImages; i++) {
      Canvas2Image.saveAsJPEG(canvases[i], canvases[i].width, canvases[i].height);
    }
  </code></pre>
  
  <p>and I also get the following error in console: </p>
  
  <blockquote>
    <p>Resource interpreted as Document but transferred with MIME type image/octet-stream:</p>
  </blockquote>
  
  <p>I can't change the MIME type, but I don't think that's the problem since teh code successfully downloads the last image with the right format.</p>
  
  <p>I also tried calling the function that saves the images with:
  1. window.onload
  2. when DOMcontentLoaded
  3. in the body of my html page
  4. document.onload</p>
  
  <p>None of the above downloaded more than the last image. 
  What am I missing here?</p>