HTML5 Canvas slideshow

Question

I'm trying to make a slideshow with html5 canvas and found this this which is working.

Anybody an idea how to get out of the loop?

  if (counter > maxNum) counter = 0;

Insstead of counter=0; I wanna get out of this loop, but all things I tried didn't work. Anybody an Idea?

Answer 1

Have you tried break; ?

if (counter > maxNum) {
    ...
    break;
}

Edit: You might also want to try return ?

if (counter > maxNum) {
    ...
    return;
}

Answer 2

If you look at the draw code you have this:

this._draw = function() {

    //if the next image will cover the canvas
    //there is no real need to clear the canvas first.
    //I'll leave it here as you ask for this specifically
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
    ctx.drawImage(images[counter++], 0, 0);
    if (counter > maxNum) counter = 0;

    setTimeout(me._draw, 1000); //here we use me instead of this
}

the problem is that you don't have a loop there so break does not work.

but you can replace if (counter > maxNum) counter = 0; (this resets the counter) with if (counter > maxNum) return; which exits the function so that setTimeout would not be called.