I am working on a small video game in HTML, CSS, and JavaScript. The game is almost finished, but I am having a problem with the manner in which my enemies spawn. The following code is in the spawnpoint.js file:

let rand = Math.round(Math.random() * 4) + 1;

console.log(0 + 5 * shipRad, Math.random() * canvHeight);
console.log(canvWidth - 5 * shipRad, Math.random() * canvHeight);
console.log(Math.random() * canvWidth, 0 + 5 * shipRad);
console.log(Math.random() * canvWidth, canvHeight - 5 * shipRad);

if (rand === 1)
    return [0 + 5 * shipRad, Math.random() * canvHeight]; // far left
else if (rand === 2)
    return [canvWidth - 5 * shipRad, Math.random() * canvHeight]; // far right
else if (rand === 3)
    return [Math.random() * canvWidth, 0 + 5 * shipRad]; // far top
else 
    return [Math.random() * canvWidth, canvHeight - 5 * shipRad]; // far bottom

The console outputs are there to show how the equation generates the spawn point (doesn’t have significance to actual program and will be deleted later). The problem is that if the player waits on the title screen (usually sometime around the end of the first loop of the title screen music), and then starts the game, the enemies spawn off screen. I want the enemies to spawn at the borders of the screen. I have no idea as to why this is happening. Any help is appreciated. Please ask any questions if you have any, and I will link the repository below. Thank you for your time!

My GitHub Repository