title: How can I draw an image from the HTML5 File API on Canvas?
body: <p>I would like to draw an image opened with the HTML5 File API on a canvas.</p>
  
  <p>In the <code>handleFiles(e)</code> method, I can access the File with <code>e.target.files[0]</code> but I can't draw that image directly using <code>drawImage</code>. How do I draw an image from the File API on HTML5 canvas?</p>
  
  <p>Here is the code I have used:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;script&gt;
  window.onload = function() {
      var input = document.getElementById('input');
      input.addEventListener('change', handleFiles);
  }
  
  function handleFiles(e) {
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.drawImage(e.target.files[0], 20,20);
      alert('the image is drawn');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Test&lt;/h1&gt;
  &lt;input type="file" id="input"/&gt;
  &lt;canvas width="400" height="300" id="canvas"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>