title: How can i call images from folders and how to draw image with canvas(javascript)?
body: <p>I want to draw image file with <code>canvas</code> in <code>javascript</code> but I don't know why it doesn't work.</p>
  <p>Here are my steps to call it.</p>
  <ol>
  <li>set canvas object</li>
  </ol>
  <pre><code>        {
          imageSequence: [0, 5],
          imgArray: [],
          canvas: document.querySelector(&quot;#imgadd&quot;),
          context: document.querySelector(&quot;#imgadd&quot;).getContext(&quot;2d&quot;)     
         
      }
  </code></pre>
  <ol start="2">
  <li>indexing images and push to <code>imgArray</code> and add images automatically with function</li>
  </ol>
  <pre><code>    //image indexing
      let sequence = Math.round(sceneInfo[0].imageSequence)
  
  
  
      //img add function
      function addImage() {
          let imgadd;
  
          for (let i = 1; i &lt; 7; i++) {
              imgadd = new Image();
              imgadd.src = `./img/${i}.jpg`;
              sceneInfo[0].imgArray.push(imgadd.src);
          }
      }
      addImage()
  </code></pre>
  <p>3 add window event to draw image when window loaded</p>
  <pre><code>    //when window load call function
      window.addEventListener('onload', () =&gt; {
          sceneInfo[0].context.drawImage(sceneInfo[0].imgArray[sequence], 0, 0);
  
      })
  </code></pre>
  <p>And here is my whole codes  (set anonymous function)</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>(() =&gt; {
    //canvas setting 
    const sceneInfo = [{
      imageSequence: [0, 5],
      imgArray: [],
      canvas: document.querySelector("#imgadd"),
      context: document.querySelector("#imgadd").getContext("2d")
    }];
  
    //image indexing
    let sequence = Math.round(sceneInfo[0].imageSequence)
  
    //img add function
    function addImage() {
      let imgadd;
      for (let i = 1; i &lt; 7; i++) {
        imgadd = new Image();
        imgadd.src = `./img/${i}.jpg`;
        sceneInfo[0].imgArray.push(imgadd.src);
      }
    }
    addImage();
  
    //when window load call function
    window.addEventListener('load', (e) =&gt; {
      sceneInfo[0].context.drawImage(sceneInfo[0].imgArray[sequence], 0, 0);
    })
  
    console.log(sceneInfo[0].imgArray[sequence]);
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="imgadd"&gt;&lt;/anvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And I would like to know that
  when I <code>console.log(sceneInfo[0].imgArray[sequence]);</code>
  the Array which I push the images, The console window return 'undefined'
  I don't know the reason.</p>
  <p>Thank you.</p>