I've got an image that I want to horizontally scroll repeatedly, and I've managed it most of the wat, even setting the aspect ratio for the image to screen size etc... but for some reason there's a gap, and it stutters for a second then runs okay. JS canvas code below, standard HTML5 with jQuery and a canvas tag and the body margins and padding removes and stretched to fit the window size in CSS.

It's only a stuttered gap with a landscape display, on portrait, the second image moves faster than the first... any help would be GREATLY appreciated.

let canvas;
let context;
let map = new Image();
let roadMovement = 0;
let increment = 4;
let fpsCheck = 0;
let screenx = window.innerWidth;
let screeny = window.innerHeight;
let bumper = 0;
let secondsPassed;
let oldTimeStamp;
let fps;

window.onload = init;

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

    //Set canvas size
    canvas.width = screenx;
    canvas.height = screeny;

    //Start game loop
    gameLoop();
}

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

function gameLoop(timeStamp) {

    // Calculate the number of seconds passed since the last frame
    secondsPassed = (timeStamp - oldTimeStamp) / 1000;
    oldTimeStamp = timeStamp;

    // Calculate fps
    fps = Math.round(1 / secondsPassed);

    // setup FPS to screen
    context.font = '25px Arial';
    context.fillStyle = 'red';
    context.fillText("FPS: " + fps, 120, 30);


    var aspectRat = window.innerWidth / window.innerHeight;
    var correctedHeight = map.width / aspectRat;

    roadMovement += increment;
    map.onload = function () {
        if (bumper < screeny) {
            //setup main BG image
            context.drawImage(map, 0, roadMovement, map.width, correctedHeight, 0, 0, screenx, screeny);
        }
        if (roadMovement >= map.height - correctedHeight) {
            bumper += increment;
            //setup secondry image
            context.drawImage(map, 0, 0, map.width, correctedHeight, 0, screeny - bumperfixed, screenx, screeny);
        }
        if (bumper >= screeny) {
            //reset to single image
            bumper = 0;
            roadMovement = 0;
        }
    };


    // Draw frame
    draw();

    // request new frame
    window.requestAnimationFrame(gameLoop);

}

I think it something to do with the aspect ratio change. Thank you in advance.