title: Drawing first frame of an animated GIF to an HTML5 Canvas
body: <p>When I paint a gif image to a canvas element before it finishes loading the entire gif, it just a white area. But if I do </p>
  
  <pre><code>window.stop()
  </code></pre>
  
  <p>Before it finishes, it draws the gif in the element. 
  The problem is that stopping the entire page stops all gifs instead of just the specific one I want to copy over to canvas.
  How can I paint what is currently loaded in a gif to a canvas element before it finishes loading the entire gif.
  I was thinking of maybe putting it in an iframe and stopping the iframe or some other trick like that but I would also like some ideas or solutions that you guys have to offer.</p>
  
  <p>edit: Is there a way to detect how much of the gif has been downloaded in a percentage using javascript? So that I can know that at least the first frame was downloaded?</p>