Question

I’m loading png and jpeg images in a canvas with drawImage, but it doesn’t always work, even with the same image. There’s no exception, no error, it just doesn’t work.

  {
  debug("lbase starting");

  var canvas = document.getElementById("base");
  debug(canvas);
  ctx = canvas.getContext("2d");
  debug(ctx);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var baseimg = new Image();
  debug(baseimg);
  baseimg.src = "baseimage.png";
  debug(baseimg.src);
  ctx.drawImage(baseimg, 0, 0);
  debug("base loading done");
  }

My debug function just write a message in a div at the bottom of the page. I also tried with:

  retcode ctx.drawImage(baseimg, 0, 0);
  debug(retcode)

but it returns undefined.

Everything gets executed (I get all the right debug messages), but sometimes it works, sometimes it does not. It seems to fail more in ff then chromium.

Is there anyway to verify that the drawImage has worked?
Any idea what’s going on?

Thanks.

Answer 1

You can’t add an image to the canvas until it has finished loading.

Something like this should work:

var baseimg = new Image();

baseimg.src = "baseimage.png";

baseimg.onload = function() {

    ctx.drawImage(baseimg, 0, 0);
};