Why won't my image display on the canvas?

Question

So I have done everything right otherwise another svg file wouldn't display when I choose to use it. It finds the correct file path as I am getting no errors on the console, and frankly I'm stumped here.

const body = document.body;
const navButton = document.querySelector('.navTab');
const navMenu = document.querySelector('.nav');

navMenu.style.display = "none";

navButton.addEventListener('mouseover', () => {
    navMenu.style.display = 'flex';
    navMenu.style.flexDirection = "column";
});
navButton.addEventListener('ontouchstart', () => {
    navMenu.style.display = 'flex';
    navMenu.style.flexDirection = "column";
});
navButton.addEventListener('mouseout', () => {
    navMenu.style.display = 'none';
});

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('mouseover', () => {
    canvas.style.opacity = "0.6"
});
const images = ["images/ozzy1.svg","images/ozzy2.jpg","images/ozzy3.jpg"];
const displayImage1 = new Image();
displayImage1.src = images[0]

ctx.drawImage(displayImage1.src = images[0], 0, 0, canvas.width, canvas.height);

So as you can see I'm just calling an image to my canvas, and like I said another image worked. I even tried converting the image I'm attempting to use to an svg, as the image that actually worked was also an svg.

Answer 1

I found the answer to this for anyone's future reference. I learned that you have to load the image first like so:

displayImage1.onload = () =>{
ctx.drawImage(displayImage1, 0, 0, canvas.width, canvas.height);
}