Eu estou desenhando na tela cada vez que um usuário pressiona um botão, no entanto, às vezes, a imagem não está sendo desenhada na tela. Eu acho que isso pode acontecer porque a imagem não é carregada antes da função context.drawimage ser executada, já que alguns dos arquivos menores às vezes são desenhados. Eu usei o console e verifiquei recursos e, portanto, este é o único problema que posso imaginar.

Como evito esse problema?

Este é o meu código Javascript.

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