Rysuję na płótnie za każdym razem, gdy użytkownik naciska przycisk, jednak czasami obraz nie jest rysowany na płótnie. Myślę, że może to być spowodowane tym, że obraz nie jest ładowany w czasie, zanim uruchomi się funkcja context.drawimage, ponieważ niektóre mniejsze pliki czasami są rysowane. Użyłem konsoli i sprawdziłem zasoby, więc jest to jedyny problem, jaki mogę sobie wyobrazić.

Jak uniknąć tego problemu?

To jest mój kod 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);
}