Question

Whenever i first loaded the page. The image doesn’t get restored but once i load the page and i hit F5. then it works. i’m not where whats wrong with my code.

// 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. Instead of calling the ajax automatically when the page is loaded, i manually triggered the ajax call via a button, still i get the same result.
The base64 strings is retrieved successfully and imaged is not loaded. but when i clicked the button for a second time. the image is than loaded.

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