make canvas image repeat scrolling upwards – Blancer.com Tutorials and projects

So I’ve got a 600×2400 image I’m trying to make scroll upwards (character will be autorunning down the screen) and repeat. I’ve got the scrolling, but not the repeat. My question is, how do I make the image redraw for a second instance from the top and continue when I get to the end of this one? so far when the code gets to the end of the image, I just get a staggered repeat of the bottom section of the first instance scrolling.

let canvas;
let context;
let secondsPassed;
let oldTimeStamp;
let fps;
let map = new Image();
let roadMovement = 0;


window.onload = init;

function init() {
    canvas = document.getElementById('gameCanvas');
    context = canvas.getContext('2d');


    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    window.requestAnimationFrame(gameLoop);
}

function draw() {
    map.src = "map.png";

}


function gameLoop(timeStamp) {
    secondsPassed = (timeStamp - oldTimeStamp) / 1000;
    oldTimeStamp = timeStamp;
    fps = Math.round(1 / secondsPassed);



    roadMovement += 2;

    map.onload = function () {
        context.drawImage(map, 0, roadMovement, 600, 600, 0, 0, canvas.width, canvas.height);
        
    };

    draw();
    window.requestAnimationFrame(gameLoop);
}

CSS

body{
    position: absolute;
    width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#gameCanvas{
    position: relative;
    left:0;
    top:0;
    margin:0;
    padding:0;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas">
    </canvas>

    <script src="script.js"></script>
</body>
</html>