HTML5 canvas - drawImage not always drawing the image

Question

I am drawing on the canvas each time a user presses a button, however sometimes the image is not getting drawn on the canvas. I think this could be that the image isn't loaded in time before the context.drawimage function runs, as some of the smaller files sometimes get drawn. I've used the console and checked resources and so this is the only problem I can think of.

How do I avoid this problem?

This is my Javascript code.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var questionbg = new Image();
var answerbg = new Image();

//this code is inside a function that is called each time a user presses a button
if(questiontype == "text"){
    questionbg.src = "./resources/textquestionbg.png";
    context.drawImage(questionbg, 0, 0);
    }
//if image question
else if(questiontype == "image"){
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
//if audio question
else if(questiontype == "audio"){
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}
//else it is a video question
else{
questionbg.src = "./resources/imageaudiovideoquestionbg.png";
context.drawImage(questionbg, 0, 0);
}

Glamorous

Answer 1

You should check if the image is loaded. If not then listen to the load event.

questionbg.src = "./resources/imageaudiovideoquestionbg.png";
if (questionbg.complete) {
    context.drawImage(questionbg, 0, 0);
} else {
    questionbg.onload = function () {
        context.drawImage(questionbg, 0, 0);    
    };
}

---

MDN (Mozilla Doc, great source btw) suggests:

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  };
  img.src = '/files/4531/backdrop.png';
}

Obviously, you are not wanting to apply the stroke or fill. However, the idea is the same.

Tripalmitin

It's better to setup img.src after you defined img.onload handler. – Jamesjamesian

what if you aren't writing from a image but from an html5 video control. When the frame changes on timeupdate there is no way to check if the image is loaded. – Undeniable