ctx.drawImage from canvas dynamically created in js does not work

Question

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = 'lightgreen';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let image = document.createElement('img');
image.src = 'https://www.pngplay.com/wp-content/uploads/5/Alphabet-C-Transparent-File.png';
document.body.appendChild(image);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0, 500, 500);
ctx.fillRect(100, 100, 50, 50);

canvas {
  border: 1px solid black;
}

If I use ctx.drawImage(...) with the canvas created in js, it will not work.
If I use fillRect(...), it does draw rectangle as intended.
At least in Vscode. It doesn't draw rectangle in this code snippet thing. I cannot figure out why this is.
Does anyone know why?

In the code, you use `letter` in `drawImage()`, but `letter` isn't declared anywhere. Have you tried it with using `ctx.drawImage(image, 0, 0, 500, 500);` instead? — Geshode, Sep 20 '22 at 05:21
Sry that's typo. Yes I did try with 'image' and it won't work. — lcm5506, Sep 20 '22 at 05:31
..so it worked for me the second time of running the snippet I guess because the image was already in cache. — A Haworth, Sep 20 '22 at 05:35
For me, no matter how many times I run I dont have the image inside the canvas. only outside from body.appendChild() — lcm5506, Sep 20 '22 at 05:37

score 0 · Answer 1 · answered Sep 20 '22 at 05:46

You need to wait until the image hs loaded before drawing it on the canvas.

This snippet adds an event listener to the img element and draws it when the load event fires.

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.backgroundColor = 'lightgreen';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let image = document.createElement('img');
image.src = 'https://www.pngplay.com/wp-content/uploads/5/Alphabet-C-Transparent-File.png';
document.body.appendChild(image);
ctx.clearRect(0, 0, canvas.width, canvas.height);
image.addEventListener('load', function() {
  ctx.drawImage(image, 0, 0, 500, 500);
  ctx.fillRect(100, 100, 50, 50);
});

canvas {
  border: 1px solid black;
}

ctx.drawImage from canvas dynamically created in js does not work

1 Answers1