javascript - Loop through folder images in Canvas -

i'm trying have canvas element on page loop through set of images within folder. i've figured out how set image on canvas im not sure how multiple images 1 after another.

i've thought possible using loop , array im not sure best way store images in array.

this site working 1 image. onload shows image, after set time canvas hidden , reply button appears: http://www3.carleton.ca/clubs/sissa/html5/

what i'm trying images (25) show 1 after pretty fast. kinda marvel intro animation lot worst :)

this i've done far canvas set up

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 ='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'; } 

this assignment i'm not allowed use other canvas here.

function startanimation(){     var images = {"imagepath1","imagepath2"... way 25!};     for(int i=0; i<25; i++)     {         img = new image();         img.src = images[i];         img.onload = function(){ctx.drawimage(img,0,0, canvas.width,canvas.height)}     } } 

you might want put delay in there fear of not being perceptible human eye/they go fast.