холст не всегда загружается

Question

Я загружаю изображения png и jpeg на холст с помощью drawImage, но это не всегда работает, даже с одним и тем же изображением.Там нет исключений, нет ошибок, это просто не работает.

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

Моя функция отладки просто написать сообщение в div в нижней части страницы.Я также попытался с:

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

, но он возвращает неопределенное значение.

Все выполняется (я получаю все правильные сообщения отладки), но иногда это работает, иногда нет.Кажется, что он больше не работает, чем хром.

Есть ли способ проверить, работает ли drawImage?Есть идеи, что происходит?

Спасибо.

Answer 1

Вы не можете добавить изображение на холст, пока оно не завершит загрузку.

Примерно так должно работать:

var baseimg = new Image();

baseimg.src = "baseimage.png";

baseimg.onload = function() {

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