Question

I got a strange problem with the “DrawImage”-Methode of the Canvas element. With the following code I create the canvas and attache it to the “rightcanvas” div.

var rightcanvas = document.getElementById('rightcanvas');   
rcanvas = document.createElement('canvas');
rcanvas.setAttribute('width', canvasLength);
rcanvas.setAttribute('height', canvasHeight);
rcanvas.setAttribute('id', 'rcanvas');
rightcanvas.appendChild(rcanvas);

And now I try to draw a Base64 encoded image.

var rcontext = rcanvas.getContext('2d');
var image = new Image();
image.src = 'data:image/png;base64,iVBOR....';
rcontext.drawImage(image,0,0);

The canvas will be created and attached. But the image will not be displayed.Does somebody know what the problem is? =(

Answer 1

You have to wait for the image to load before drawing it to the canvas.

var image = new Image();
image.onload = function() {
    rcontext.drawImage(image, 0, 0);
}
image.src = 'data:image/png;base64,iVBOR....';