javascript draw a image on canvas

Question

I try to build a javascript code, to draw a image on canvas, but I don\'t know where go wrong. That is my code:

Answer 1

The image is loading asynchronously. This code will work:

JavaScript:

function setup(){
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 800;
    canvas.height = 600;
    var image = new Image();
    image.onload = function () {
        ctx.drawImage(image,5,5);
    };
    image.src = 'a.png';
}
window.onload = setup;

Answer 2

The problem is that image is loaded asynchronously, so if you set the source and draw it immediately then the image bits are not yet available and nothing is drawn.

You have to wait for the image to load before being able to draw it on a canvas.

Changing the code to

image.onload = function() {
    ctx.drawImage(image, 5, 5);
};
image.src = "a.png";

should work as expected.