I have an animation that when finished produces a still image. I want this image to be displayed for around 5 seconds before changing to another still image. I have tried various implementations of setTimeout to fix this but it hasnt worked for me.
Any help would be appreciated.
Heres my code:
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
<!--ctx.clearRect(0, 0, cw, ch); -->
image3 = new Image();
image3.src = "broken1.png";
ctx.drawImage(image3, 0, 0);
setTimeout(function() {
image4 = new Image();
image4.src = "broken.png";
ctx.drawImage(image4, 0, 0);
}, 5000);
}())
Felix Kling is right, you should wrap your drawing in an onload callback. Please have a look at the following code below. jsFiddle to it is here.
(I've removed the requestAnimationFrame to make the code simpler, but I think that's not the problem here.)