As I dive into learning JavaScript and experimenting without jQuery, I am interested in creating something similar to this example. However, my goal is to utilize an array of images instead of just one.
This is how my image array is structured:
var image_array = new Array();
image_array[0] = "image1.jpg";
image_array[1] = "image2.jpg";
The canvas element setup is as follows (largely inspired by 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);
}
}
}
}
The code currently uses the image "sample.png," but I aim to modify it to display images from the array. Specifically, displaying a different one each time it loops.
I apologize if the explanation is unclear.