drawing images with delay

by John kuoppala

HTML

<canvas id="canvas"></canvas>

JavaScript

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.width = 400;
c.height = 400;
var images = [];
var links = ["http://pattersonrivervet.com.au/sites/default/files/pictures/Puppy-10-icon.png",
           "https://38.media.tumblr.com/avatar_2be52b9ba912_128.png"];
var counter = 0;

function draw(imgs){
    ctx.clearRect(0,0,c.width,c.height);
    var step = 0;  // I want to start with zero;
    imgs.forEach(function(src){   // then go through the array links
        // and I want to draw the images from the array
        ctx.drawImage(src, 0, step);
        step += src.height;  // This is the step for the next picture. Let's use the height of the image.
    })
}

function loadImg(link){
    var img = new Image();
    img.src = link;
    images.push(img);
    draw(images);
};


var myInterval = setInterval(function(){ 
    // you can add images in different ways, I used an array of links
    loadImg(links[counter]);
    
    counter++; //set counter to next image
    if (counter > links.length) {
        //if we're out of images, stop trying to add more
        clearInterval(myInterval); 
    }     
}, 3000);