title: loading an image on web browser using Promise()
body: <p>I'am trying to learn how to make SuperMario in JavaScript from <a href="https://www.youtube.com/watch?v=g-FpDQ8Eqw8&amp;list=PLS8HfBXv9ZWWe8zXrViYbIM2Hhylx8DZx" rel="noreferrer">here</a>
  Can someone explain flow of the below function LoadImage ?</p>
  
  <pre><code>function loadImage(url) {
          return new  Promise(resolve =&gt; {
              const image = new Image();
              image.addEventListener('load', () =&gt; {
                  resolve(image);
              });
              image.src = url; 
          });
  }
  
  const canvas = document.getElementById('screen');
  const context = canvas.getContext('2d');
  
  context.fillRect(0,0,50,50);
  
  loadImage('/img/tiles.png')
  .then(image=&gt;{
      context.drawImage(image,0,0);  // the function LoadImage returns a Promise with image object(which is  a constant)
  // as parameter and if the promise is fulfilled then the image is drawn. 
  /
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I do understand how to use => operator. 
  Which is used to make length of functions smaller.</p>
  
  <pre><code>image.addEventListener('load', () =&gt; {
                  resolve(image);
  </code></pre>
  
  <p>the above line means that the promise is fulfilled when image is loaded.
  So does this mean that the following line is executed and then the event listener is waiting for the image to be downloaded in client browser ?</p>
  
  <pre><code>image.scr = url;
  </code></pre>
  
  <p>The flow of the below function is a little fuzzy to me</p>
  
  <pre><code>function loadImage(url) {
          return new  Promise(resolve =&gt; {
              const image = new Image();
              image.addEventListener('load', () =&gt; {
                  resolve(image);
              });
              image.src = url; 
          });
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>Okay, this was a stupid post. And yup as the IMAGE from url is loaded in the image object then Event listener fires up the resolve().</p>