Loop through folder images in Canvas

Question

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

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 is an assignment so I'm not allowed to use anything other than the canvas here.

score 1 · Accepted Answer · answered Apr 05 '13 at 00:59

1

function startAnimation(){
    var images = {"imagepath1","imagepath2"... all the way to 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 to put a delay in there for fear of not being perceptible by the human eye/they go by too fast.

answered Apr 05 '13 at 00:59

MaxOvrdrv

1,780
17
32

Could something like setTimeout take care of that? – Batman Apr 05 '13 at 01:07
yes... for().. setTimeout(function(){img = new Image()... }, 1000); play around with it... – MaxOvrdrv Apr 05 '13 at 01:11
Now that I think about it, I don't think that would work because the setTimeout would keep calling the inner function and not allow the for loop to finish and iterate. Does that make any sense? – Batman Apr 05 '13 at 01:22
1

yeah maybe... a delay would be best: http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop – MaxOvrdrv Apr 05 '13 at 01:28
Yea this is working for me. Thank you. Just need to make sure to reset the counter when I manual replay it. But otherwise it's doing exactly what I wanted. Thank you. – Batman Apr 05 '13 at 02:00

Loop through folder images in Canvas

1 Answers1