Ich zeichne jedes Mal auf der Leinwand, wenn ein Benutzer eine Taste drückt. Manchmal wird das Bild jedoch nicht auf der Leinwand gezeichnet. Ich denke, dies könnte sein, dass das Bild nicht rechtzeitig geladen wird, bevor die Funktion context.drawimage ausgeführt wird, da einige der kleineren Dateien manchmal gezeichnet werden. Ich habe die Konsole verwendet und die Ressourcen überprüft. Dies ist also das einzige Problem, an das ich denken kann.

Wie vermeide ich dieses Problem?

Dies ist mein 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);
}