title: html5-canvas: Conversion of Image file to DataURL throws Uncaught TypeError
body: <p>I'm trying to get the Base64/Data URL of a chosen image file in Javascript. The user basically selects an image via the File Input control and the Data URL is generated. However, I get this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Failed to execute 'drawImage' on
    'CanvasRenderingContext2D': The provided value is not of type
    '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or
    ImageBitmap)'</p>
  </blockquote>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="form1"&gt;
      &lt;div&gt;
          &lt;input type="file" id="imageinput" onchange="testit(event)" /&gt;
          &lt;canvas width="300" height="300" id="mycanvas" style="display: none;"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function testit(event) {
  
              var myImage = URL.createObjectURL(event.target.files[0]);
  
              var myCanvas = document.getElementById('mycanvas');
  
              var ctx = myCanvas.getContext('2d');
  
              ctx.drawImage(myImage, 0, 0);
  
              var mydataURL = myCanvas.toDataURL('image/jpg');
  
              alert(mydataURL);
  
          }
  </code></pre>
  
  <p>Why isn't this code working, guys?</p>