title: How to fetch a remote image to display in a canvas?
body: <p>How can I fetch images from a server?</p>
  
  <p>I've got this bit of code which allows me to draw some images on a canvas.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript"&gt;
        function draw(){
          var canvas = document.getElementById('canv');
          var ctx = canvas.getContext('2d');
  
          for (i=0;i&lt;document.images.length;i++){
            ctx.drawImage(document.images[i],i*150,i*130);
          }
      }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="draw();"&gt;
      &lt;canvas id="canv" width="1024" height="1024"&gt;&lt;/canvas&gt;
      &lt;img src="http://www.google.com/intl/en_ALL/images/logo.gif"&gt;
      &lt;img src="http://l.yimg.com/a/i/ww/beta/y3.gif"&gt;
      &lt;img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png"&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Instead of looping over document.images, i would like to continually fetch images from a server.</p>
  
  <pre><code>for (;;) {
      /* how to fetch myimage??? */
      myimage = fetch???('http://myserver/nextimage.cgi');
      ctx.drawImage(myimage, x, y);
  }
  </code></pre>