Trying to display images using JSON file in Javascript

I am trying to display different plane images on a canvas. I have a JSON file that includes the name of cities in an array:

{
    "cities": [{
        "city": "St. John",
        "xCoor": 931,
        "yCoor": 349
    }, {
        "city": "Halifax",
        "xCoor": 844,
        "yCoor": 424
    }, {
        "city": "Charlottetown",
        "xCoor": 838,
        "yCoor": 407
    }, {
        "city": "Fredericton",
        "xCoor": 800,
        "yCoor": 422
    }, {
        "city": "Quebec",
        "xCoor": 734,
        "yCoor": 427
    }, {
        "city": "Ottawa",
        "xCoor": 685,
        "yCoor": 459
    }, {
        "city": "Toronto",
        "xCoor": 655,
        "yCoor": 483
    }, {
        "city": "Winnipeg",
        "xCoor": 420,
        "yCoor": 430
    }, {
        "city": "Regina",
        "xCoor": 336,
        "yCoor": 417
    }, {
        "city": "Edmonton",
        "xCoor": 250,
        "yCoor": 364
    }, {
        "city": "Victoria",
        "xCoor": 111,
        "yCoor": 398
    }, {
        "city": "Whitehorse",
        "xCoor": 115,
        "yCoor": 235
    }, {
        "city": "Yellowknife",
        "xCoor": 285,
        "yCoor": 271
    }, {
        "city": "Iqaluit",
        "xCoor": 645,
        "yCoor": 243
    }]
}

Now, I want to display images on a canvas in a random position on the canvas using random plane images corresponding to the name of the cities, and I’m not sure if I am doing it properly.

Here is how I got the JsonData:

function getJsonData() {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            schedule = JSON.parse(xhttp.responseText);
        }
    }

    xhttp.open("GET", "capitals.json", true);
    xhttp.send();
}

And the code I used to try and display the images on the canvas:

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

    ctx.drawImage(findImage(randomCity), 0, 0);
    console.log(randomCity);
}


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" || cityNames == "St.John") {

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

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

Any type of clarification on how to fix this would be much appreciated

Answer

The complete error you are getting is probably this one:

Uncaught TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: No function was found that matched the signature provided.

The problem here is that CanvasRenderingContext2D.drawImage requires an Image object as its first parameter.

Your findImage function currently returns the image path.

You could alter your function like this:

function drawPlanes() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");

    const cityNames = schedule["cities"];
    const randomCity = cityNames[Math.floor(Math.random() * cityNames.length)];
    console.log(randomCity);

    const image = new Image();
    image.onload = function() {
        ctx.drawImage(image, 0, 0);
    };
    image.src = findImage(randomCity);
}