HTML5 canvas - drawImage not always drawing the image

15,943

You should check if the image is loaded. If not then listen to the load event.

questionbg.src = "./resources/imageaudiovideoquestionbg.png";
if (questionbg.complete) {
    context.drawImage(questionbg, 0, 0);
} else {
    questionbg.onload = function () {
        context.drawImage(questionbg, 0, 0);    
    };
}


MDN (Mozilla Doc, great source btw) suggests:
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  };
  img.src = '/files/4531/backdrop.png';
}

Obviously, you are not wanting to apply the stroke or fill. However, the idea is the same.

Share:
15,943
user2177629
Author by

user2177629

Updated on June 12, 2022

Comments

  • user2177629
    user2177629 over 1 year

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