title: Javascript Canvas Element - Array Of Images
body: <p>I'm just learning JS, trying to do things without jQuery, and I want to make something similar to <a href="https://developer.mozilla.org/samples/canvas-tutorial/3_2_canvas_drawimage.html" rel="nofollow noreferrer">this</a> however I want to use an array of images instead of just the one.</p>
  
  <p>My image array is formed like this</p>
  
  <pre><code>var image_array = new Array()
  image_array[0] = "image1.jpg" 
  image_array[1] = "image2.jpg"
  </code></pre>
  
  <p>And the canvas element is written like this. (Pretty much entirely taken from the Mozilla site)</p>
  
  <pre><code>function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        var img = new Image();
        img.src = 'sample.png';
        img.onload = function(){
          for (i=0;i&lt;5;i++){
            for (j=0;j&lt;9;j++){
              ctx.drawImage(img,j*126,i*126,126,126);
            }
          }
        }
      }
  </code></pre>
  
  <p>It uses the image "sample.png" in that code but I want to change it to display an image from the array. Displaying a different one each time it loops.</p>
  
  <p>Apoligies if I've not explained this well.</p>