I'm trying to have the canvas element on my page loop through a set of images within a folder. I've figured out how to set the image on the canvas but im not sure how to do multiple images one after another. I've thought possible using a for loop and an array but im not sure what the best way is to store all the images in an array.This is my site with it working with one image. Onload it shows the image, after a set time canvas is hidden and a reply button appears: http://www3.carleton.ca/clubs/sissa/html5/What I'm trying is to get all images (25) to show one after another pretty fast. Kinda like the Marvel intro animation but a lot worst 
This is what I've done so far to get the canvas set up\[code\]window.addEventListener("load", initCanvas);var canvas, play, ctx, playLenght, img; function initCanvas(){ getElements(); setCanvas();}function getElements(){ canvas = document.getElementById('canvas'); play = document.getElementById('canvasPlay'); play.addEventListener("click",setCanvas);}function setCanvas(){ //Hide ctx play button play.style.visibility = 'hidden'; //Make ctx visible canvas.style.visibility = "visible"; ctx = canvas.getContext("2d"); //Clear ctx ctx.clearRect(0,0,canvas.width, canvas.height); playLenght = 3000; startAnimation(); setTimeout(hideCanvas, playLenght); }function startAnimation(){ img = new Image(); img.src ='http://stackoverflow.com/questions/15824183/images/canvas/canvas.batman.jpg'; img.onload = function(){ctx.drawImage(img,0,0, canvas.width,canvas.height)}}function hideCanvas(){ canvas.style.visibility = 'hidden'; play.style.visibility = 'visible';}\[/code\]This is an assignment so I'm not allowed to use anything other than the canvas here.
This is what I've done so far to get the canvas set up\[code\]window.addEventListener("load", initCanvas);var canvas, play, ctx, playLenght, img; function initCanvas(){ getElements(); setCanvas();}function getElements(){ canvas = document.getElementById('canvas'); play = document.getElementById('canvasPlay'); play.addEventListener("click",setCanvas);}function setCanvas(){ //Hide ctx play button play.style.visibility = 'hidden'; //Make ctx visible canvas.style.visibility = "visible"; ctx = canvas.getContext("2d"); //Clear ctx ctx.clearRect(0,0,canvas.width, canvas.height); playLenght = 3000; startAnimation(); setTimeout(hideCanvas, playLenght); }function startAnimation(){ img = new Image(); img.src ='http://stackoverflow.com/questions/15824183/images/canvas/canvas.batman.jpg'; img.onload = function(){ctx.drawImage(img,0,0, canvas.width,canvas.height)}}function hideCanvas(){ canvas.style.visibility = 'hidden'; play.style.visibility = 'visible';}\[/code\]This is an assignment so I'm not allowed to use anything other than the canvas here.