title: Canvas doesnt rendering image from input
body: <p>Hi i want to draw image that is inserted in input. I get a right data in my image object and i can show img in body as html element, but my canvas doesnt rendering it.</p>
  <p>here is my html</p>
  <pre><code>        &lt;canvas id=&quot;loadImageCanvas&quot;&gt;&lt;/canvas&gt;
          &lt;input id=&quot;loadImageInput&quot; type=&quot;file&quot;&gt;
  </code></pre>
  <p>here is my javascript</p>
  <pre><code>class ImageEditor{
  
  constructor(){
      this.canvasElement = document.getElementById('loadImageCanvas');
      this.canvas = document.getElementById('loadImageCanvas').getContext('2d');
      this.imageInput = document.getElementById('loadImageInput');
      this.loadedImg = new Image();
     }
  
  loadImage = () =&gt; {
      console.log(this.loadedImg)
      this.canvas.drawImage(this.loadedImg, 0, 0);
     }
  
  init = () =&gt;{
      this.canvasElement.width = 300;
      this.canvasElement.height = 300;
     }
  }
  
  $(document).ready(function(){
      $(&quot;#loadImageInput&quot;).change(function(){
          readURL(this);
      })
  })
  
  function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
        let reader = new FileReader();
        reader.readAsDataURL(input.files[0]); // convert to base64 string
          reader.onload = function(e) {
          imgEditor.loadedImg.src = e.target.result;
          imgEditor.canvas.drawImage(imgEditor.loadedImg, 0, 0);
          imgEditor.loadImage();
          }
      }
    }
  
  let imgEditor = new ImageEditor();
  imgEditor.init();
  </code></pre>
  <p>In fact i was able to render image on canvas when i used two same event listeners for my input, but i dont understant why it doesnt work with one event listener.</p>