title: Draw raw-image into canvas
body: <p>I want to put an uploaded image into a canvas and work with it. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h2&gt;Upload:&lt;/h2&gt;
  &lt;input type="file" id="take-picture" accept="image/*"&gt;
  
  &lt;h2&gt;Preview:&lt;/h2&gt;
  &lt;p&gt;
      &lt;canvas id="show-picture" style="background-color: aqua; height: 100px; width: 100px;" /&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Here is my javascript that handles the picture after upload:</p>
  
  <pre><code>    takePicture.onchange = function (event) {
          var files = event.target.files,
              file;
          if (files &amp;&amp; files.length &gt; 0) {
              file = files[0];
              processImage(file);
          }
      };
  </code></pre>
  
  <p>Now in the processImage-method the picture should be stored within a canvas. </p>
  
  <pre><code>function processImage(file) {
      // showImage(showPicture, file); //loading into a regular img-tag
  
      var canvas = document.getElementById('show-picture');
      var context = canvas.getContext('2d');
      context.drawImage(file, 100, 100);
  }
  </code></pre>
  
  <p>I was able to put this file into an img-tag but I can't simply draw it.</p>
  
  <p>Any ideas?</p>