Menu
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:
<body>
<canvas id = "my_canvas"></canvas>
<script>
function setup(){
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
var image = new Image();
image.src = 'a.png';
ctx.drawImage(image,5,5);
};
window.onload = setup;
setup();
</script>
The question is, if I put a line of code setup(); at end then the image is correctly draw, I don't know why.
Thanks.
763
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.
172
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
