Why won't my image draw to canvas unless there is an instance of the image in the html?

Question

I have a canvas element, context 2d, and a list of image sources I want to be able to switch between. Currently, the only image that draws is the image that is already loaded in the html, with the other images simply not drawing to canvas, BUT when I console.log the image will show the image object, but it still doesn't draw. I also drew a test rectangle previously to make sure the canvas is working, and the rectangle drew fine. Here is my code.

Html:

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Card Test</title>
</head>

<body>
    <canvas class="canvas" height="700" width="700" style="background-color: #3e3e3e"></canvas>

</body>

<img width="100" height="200" src="/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/3C.png">



<script type="text/javascript" src="draw.js"></script>

</html>

Javascript (draw.js):

const canvas = document.querySelector(".canvas");

var imageObj = new Image();

const ctx = canvas.getContext("2d");

const images = [
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/2C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/3C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/4C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/5C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/6C.png',
    '/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/7C.png'
];

window.onload = function() {

    console.log('test1');
    imageObj.width = 100;
    imageObj.height = 200;
    imageObj.src = images[4]; // EX. Only images[1] will load because I have it loaded in the html

    console.log(imageObj);

    ctx.drawImage(imageObj, 50, 50);

    console.log('test2');
}

In javascript, setting the src of an image only starts the loading process. The image isn't immediately available. Try drawing the image after it's loaded, using `onload ` (see https://stackoverflow.com/a/12355031/2740650). — user2740650, Dec 29 '20 at 18:54

score 2 · Answer 1 · answered Dec 29 '20 at 18:58

Wait for the image to load with an event listener before you try to draw it on the canvas.

const images = [
  'https://picsum.photos/100/200?random=1',
  'https://picsum.photos/100/200?random=2',
  'https://picsum.photos/100/200?random=3',
  'https://picsum.photos/100/200?random=4',
  'https://picsum.photos/100/200?random=5',
];

var imageObj = new Image();
imageObj.width = 100;
imageObj.height = 200;
imageObj.src = images[4];
imageObj.addEventListener("load", () => {
  const canvas = document.querySelector(".canvas");
  const ctx = canvas.getContext("2d");
  ctx.drawImage(imageObj, 50, 50);
});

canvas {
  background-color: #3e3e3e;
}

<canvas class="canvas" height="700" width="700"></canvas>

Perfect! That worked! Thank you so much. I just used `imageObj.onload = function() { ctx.drawImage(imageObj, 50, 50, 100, 200); }` — ItBeCharlie, Dec 29 '20 at 20:05
Yeah, that works, too. On first glance at the docs, I thought that was deprecated, but it looks like it's still supported. Cool. — Will, Dec 29 '20 at 20:17

Why won't my image draw to canvas unless there is an instance of the image in the html?

1 Answers1