Display an image after a time delay on html canvas

Question

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);
}())

The current code above only displays the first image (broken1.png) and then it seem to stop and wont display the next image — Smithy, Dec 01 '14 at 16:24
Please check this [SO question](http://stackoverflow.com/questions/27159682/constant-script-change-src-iframe-1min-5min-jquery/27161331#27161331). It does the same with an iframe, but that should also work with images. — AWolf, Dec 01 '14 at 16:26
Could the problem be that the image has to be loaded before it can be drawn? — Felix Kling, Dec 01 '14 at 16:26
Yes perhaps. If the timeout function is removed from the code then it just skips image 3 and goes straight to image 4. Would simply window.onload() be a possible solution then? — Smithy, Dec 01 '14 at 16:29
In that case, the problem is rather that you are drawing `broken1.png` over and over again, because you are "recursively" calling the function via `window.requestAnimationFrame(drawFrame, canvas);`. I.e. `broken.png` is drawn, but it's immediately overwritten. by the next `drawFrame` call. One solution could be to remove the call to `window.requestAnimationFrame`, but that depends on what else the code is supposed to do. — Felix Kling, Dec 01 '14 at 16:35
So simply remove the 'window.requestAnimationFrame' and then use the setTimeout function still or just remove the setTimeout and just load in the next image? — Smithy, Dec 01 '14 at 16:43

score 0 · Accepted Answer · answered Dec 01 '14 at 16:49

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.)

$(function () {
    function drawFrame() {
        //window.requestAnimationFrame(drawFrame, canvas);
        var c = document.getElementById("container");
        var ctx = c.getContext("2d");
        //ctx.clearRect(0, 0, cw, ch);
        image3 = new Image();
        image3.onload = function() {
            ctx.drawImage(this, 0, 0);
            //console.log("loaded");
        };
        image3.src = "http://placehold.it/300x300";
        
        setTimeout(function () {
            image4 = new Image();
            
            image4.onload = function() {
                ctx.drawImage(this, 0, 0);
            };
            image4.src = "https://placekitten.com/g/300/300";
        }, 5000);
    }
    
    drawFrame();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="container"></canvas>

Display an image after a time delay on html canvas

1 Answers1