Javascript Canvas Element - Array Of Images

Posted by Ben Shelock on Stack Overflow See other posts from Stack Overflow or by Ben Shelock
Published on 2009-09-01T03:31:50Z Indexed on 2010/03/28 5:53 UTC
Read the original article Hit count: 260

Filed under:
|
|
|

I'm just learning JS, trying to do things without jQuery, and I want to make something similar to this however I want to use an array of images instead of just the one.

My image array is formed like this

var image_array = new Array()
image_array[0] = "image1.jpg" 
image_array[1] = "image2.jpg"

And the canvas element is written like this. (Pretty much entirely taken from the Mozilla site)

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      var img = new Image();
      img.src = 'sample.png';
      img.onload = function(){
        for (i=0;i<5;i++){
          for (j=0;j<9;j++){
            ctx.drawImage(img,j*126,i*126,126,126);
          }
        }
      }
    }

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.

Apoligies if I've not explained this well.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about canvas