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

}