Восстановить холст с помощью строки base64

Question

Всякий раз, когда я впервые загрузил страницу. Изображение не восстанавливается, но как только я загружаю страницу и нажимаю F5. тогда это работает. я не там, где не так с моим кодом.

// variable r contains the base64 string which is retrieved via a ajax call.

    var myImage = new Image();
    myImage.src = r;
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(myImage, 0, 0);

Ok. Вместо того, чтобы автоматически вызывать ajax при загрузке страницы, я вручную запускал вызов ajax с помощью кнопки, но все равно получал тот же результат. Строки base64 извлечены успешно, а образ не загружен. но когда я нажал кнопку во второй раз. чем загружено изображение.

Answer 1

var myImage = new Image();
myImage.src = r;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// wait for it to load before calling draw
myImage.onload = function() {
  ctx.drawImage(myImage, 0, 0);
}