title: Problem with drawing image on canvas after loading it with fetch and async/await
body: <p>I tried to load image using fetch and async/await and display it on canvas, but it doesn't work. The image isn't drawn on canvas. It loads correctly into img element in HTML. On canvas if I wrap the drawing code in setTimeout it works, but I would prefer to not to do this.</p>
  <p>Is there some way to load the image using await and fetch and draw it on canvas without setTimeout?</p>
  <p>Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>async function loadImage(url) {
      let response = await fetch(url);
      let blob = await response.blob();
      return URL.createObjectURL(blob);
  }
  
  let canvas = document.body.querySelector("canvas");
  let ctx = canvas.getContext("2d");
  
  let tileURL = loadImage("https://avatars.githubusercontent.com/u/92330684?s=120&amp;v=4").then((tileURL) =&gt; {
          
      // Displaying image element in HTML works.
      let img = document.body.querySelector("img");
      img.src = tileURL;
      
      // Displaying the image immediately in canvas doesn't work.
      ctx.drawImage(img, 0, 0);
      
      // But it works if I add some delay.
      setTimeout(() =&gt; {
           ctx.drawImage(img, 100, 0);
      }, 3000); // 3 second delay.
      
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
     border: 1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas&gt;&lt;/canvas&gt;
  &lt;img&gt;</code></pre>
  </div>
  </div>
  </p>