I am trying to put an image on a canvas. I read the following tutorial
and tried to do something similar to it
my canvas is <canvas id="canvas" width="400" height="400"></canvas>
and I have created the function
function putImage(){
var img = new Image();
img.src = "./path.png";
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(img,8,8);
}
but the image is not appearing on the canvas. I have printed the image path and it is correct, so I was able to eliminate this issue. any suggestions?
thanks
3 Answers
According to the tutorial, you're supposed to wrap your ctx.drawImage() inside img.onload like so
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = '/files/4531/backdrop.png';
}
I hope this helps.
To add to Hass's answer: If you don't like the onload approach, you can await a Promise, like so:
async function draw() {
let ctx = document.getElementById("canvas").getContext('2d');
let url = "";
let img = new Image();
await new Promise(r => img.onload=r, img.src=url);
ctx.drawImage(img, 0, 0);
}
If you don't like to use Promise or onload you can also use EventListener:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.addEventListener('load', function(){
ctx.drawImage(img, 0, 0);
});
img.src = '/files/4531/backdrop.png';
}
