Canvas.drawImage not working
<p>I know this question has been asked lot of times, but i am not able to figure out what am i doing wrong</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('myCanvas');

function handleFiles(files) {
  var preview = document.getElementById('preview');
  for (var i = 0; i &lt; files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;

    if (!imageType.test(file.type)) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.src = URL.createObjectURL(file);
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.

    img.onload = drawImage(img);

  }
}
var drawImage = function(img) {
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="preview"&gt;&lt;/div&gt;
&lt;input type="file" onchange="handleFiles(this.files)"&gt;
&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>