title: Error in loading drawImage() method in Javascript canvas
body: <p>I have the following class inside my code:</p>
  <pre><code>//Collectables
  const humanImg = new Image();
  humanImg.src = &quot;../images/human.png&quot;;
  const mutationImg = new Image();
  mutationImg.src = &quot;../images/mutation.png&quot;;
  //Canvas
  const mycanvas = document.getElementById('my-canvas');
  let ctx = mycanvas.getContext('2d');
  //Classes
  class Collectable {
      constructor(img, x, y, width, height) {
          this.img = img;
          this.x = x;
          this.y = y;
          this.width = width;
          this.height = height;
          this.collected = false;
          this.notScored = true;
          this.mutate = false;
      };
      draw(){
          ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
      };
      checkcollision(object) {
          return (
            this.x &lt; object.x + object.width &amp;&amp;
            this.x + this.width &gt; object.x &amp;&amp;
            this.y &lt; object.y + object.height &amp;&amp;
            this.y + this.height &gt; object.y
          );
      };
      collect(object){
          if (this.checkcollision(object)) {
              this.collected = true;
              ctx.clearRect(this.x, this.y, this.width, this.height);
              ctx.fillStyle = &quot;black&quot;;
              ctx.fillRect(this.x, this.y, this.width, this.height);
              this.mutate = true;
          };
      };
      updateScore(object, score){
          if ((this.checkcollision(object)) &amp;&amp; (this.notScored === true)){
              points += score;
              pointsRestart += score;
              this.notScored = false;
              playerMovingAudio.play();
              playerMovingAudio.volume = 0.6;
          };
      };
  };
  </code></pre>
  <p>And later on the code when I calle the class Collectable:</p>
  <pre><code>// Collectables
  const specialCollects = [
      new Collectable(mutationImg, 20, 60, 30, 30),
      new Collectable(mutationImg, 950, 60, 30, 30),
      new Collectable(mutationImg, 20, 500, 30, 30),
      new Collectable(mutationImg, 950, 500, 30, 30)
  ];
  </code></pre>
  <p>I get an error:</p>
  <pre><code>Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
  </code></pre>
  <p>And I don't know how to solve it, the error is on this line:</p>
  <pre><code>ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
  </code></pre>
  <p>Inside the class Collectable. I have tried to add and onload event on that line but the error is still there. What can I do?</p>
  <p>Thank you!</p>