HTML5 canvas - drawImage не всегда рисует изображение

Я рисую на холсте каждый раз, когда пользователь нажимает кнопку, однако иногда изображение не рисуется на холсте. Я думаю, что это может быть, что изображение неt загружается за время до запуска функции context.drawimage, так как некоторые меньшие файлы иногда прорисовываются. Я'Я использовал консоль и проверил ресурсы, и это единственная проблема, о которой я могу думать.

Как мне избежать этой проблемы?

Это мой код 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);
}

Ответы на вопрос(1)

Ваш ответ на вопрос