Images are not showing when clicking on canvas (JavaScript)

I am having an issue displaying images on a canvas when it clicks. I am using a bit of Ajax as well to get the city names from an array of JSON Objects (these city names correspond to different plane images that I am trying to display).

For example when I click the canvas nothing appears on the canvas but when I go to inspect element/network it shows that its getting the images.

This is what shows when I click the canvas, as you can see it still gets the images but doesn't display them.

The code that I used to display the images:

function drawPlanes() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
var max = 1000;
var min = 553;
var cityNames = schedule["cities"];
var randomCity = cityNames[Math.floor(Math.random()*cityNames.length)].city;

var planeImage = new Image();
planeImage.onload = function() {
    ctx.drawImage(planeImage, Math.random() * (max - min) + min, Math.random() * (max - min) + min);
};
planeImage.src = findImage(randomCity);
}

This is the findImage function that I use to determine what Image it is and from that write the source:

function findImage(cityNames) { 
if (cityNames == "Iqaluit" || cityNames == "Whitehorse" || cityNames == "Yellowknife") {
    return "img/plane.jpg";
}
    
if (cityNames == "Halifax" || cityNames == "Charlottetown" || cityNames == "Winnipeg" 
        || cityNames == "Regina" || cityNames == "Edmonton" 
            || cityNames == "Victoria" || cityNames == "Toronto") {

    return "img/" + cityNames.toLowerCase() + ".jpg";
}

if (cityNames == "Fredericton" || cityNames == "Ottawa" || cityNames == "Quebec") {
    return "img/" + cityNames.toLowerCase() + ".png";

}

if (cityNames == "St. John") {
    return "img/stjohn.jpg";
}}

In summary I am just having an issue actually displaying the images on the canvas when it is clicked. Hope this is clear.