JSFiddle - React, Tailwind, and code Playground

HTML

<div id="display">
    <header>
        <figure>
            <img src="Images/Core Elite.jpg" alt="logo" class="logo" align="left">
        </figure>
        <div>
            <nav class "topnav"> <a href="Home.html">Home</a>&nbsp; <a href="Mini.html">Minis</a>&nbsp; <a href="Junior.html">Juniors</a>&nbsp; <a href="Senior.html">Seniors</a>&nbsp; <a href="Info.html">More Info</a>

            </nav>
        </div>
        <br>
        <br>
        <section>
            <img src="Images/Juniors.jpg" id="junior" alt="juniors" class="junior">
            <img src="Images/seniors.jpg" id="senior" alt="seniors" class="senior">
            <img src="Images/minis.jpg" id="mini" alt="minis" class="mini">
        </section>
    </header>
    <br>
    <section>
        <div id="altitude">Your attitude... determines your altitude</div>
        <canvas id="canvas" width="1040" height="300"></canvas>
        <audio controls="controls" autoplay="autoplay">
            <source src="Audio/audio.ogg" type="audio/ogg" />
            <source src="Audio/audio.wav" type="audio/wav" />
            <source src="Audio/audio.aac" type="audio/aac" />
            <source src="Audio/audio.mp3" type="audio/mp3" />
        </audio>
    </section>
</div>

CSS

img.logo {
    padding:10px;
    height:200px;
    width:250px;
    transform:rotate(-10deg);
}
img.senior {
    border-radius: 30px 30px;
    height:150px;
    width:200px;
}
img.junior {
    margin-left:40px;
    transform:rotate(-7deg);
    border-radius: 30px 10px;
    height:150px;
    width:200px;
}
img.mini {
    transform:rotate(7deg);
    border-radius: 10px 30px;
    height:150px;
    width:200px;
}
#altitude {
    font-family:Vladimir Script;
    margin-left:140px;
    font-size:60px;
    text-align:left;
}
audio {
    margin-top:700px;
}
#display {
    width: 1040px;
    margin: 0 auto;
}
h1 {
    color:#E6CF89;
    font-size:20px;
}
li {
}
aside {
    color:#E6CF89;
    font-size:12px;
    border-style:inset;
    display:table-left;
    width:300px;
}
#display {
    background-color:#c76390;
}

JavaScript

var img = new Array[];

img[0] = new Image();
img[0].src = 'Images/Juniors.jpg';

img[1] = new Image();
img[1].src = 'Images/minis.jpg';

img[2] = new Image();
img[2].src = 'Images/senior.jpg';


var CanvasXSize = 1040;
var CanvasYSize = 240;
var speed = 40; //lower is faster
var scale = 1.05;
var y = -4.5; //vertical offset
//End User Variables

var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;

img.onload = function () {
    imgW = img.width * scale;
    imgH = img.height * scale;
    if (imgW > CanvasXSize) {
        x = CanvasXSize - imgW;
    } // image larger than canvas
    if (imgW > CanvasXSize) {
        clearX = imgW;
    } // image larger than canvas
    else {
        clearX = CanvasXSize;
    }
    if (imgH > CanvasYSize) {
        clearY = imgH;
    } // image larger than canvas
    else {
        clearY = CanvasYSize;
    }

    ctx = document.getElementById('canvas').getContext('2d'); //Get Canvas Element    
};

function draw() {
    //Clear Canvas
    ctx.clearRect(0, 0, clearX, clearY);

    //If image is <= Canvas Size
    if (imgW <= CanvasXSize) {
        //reset, start from beginning
        if (x > (CanvasXSize)) {
            x = 0;
        }
        //draw aditional image
        if (x > (CanvasXSize - imgW)) {
            ctx.drawImage(img, x - CanvasXSize + 1, y, imgW, imgH);
        }
    }
    //If image is > Canvas Size
    else {
        //reset, start from beginning
        if (x > (CanvasXSize)) {
            x = CanvasXSize - imgW;
        }
        //draw aditional image
        if (x > (CanvasXSize - imgW)) {
            ctx.drawImage(img[0], x - imgW + 1, y, imgW, imgH);
        }
    }

    for (i = 0; i < img.length; i++) {
        ctx.drawImage(img[i], x, y, imgW, imgH);
        //amount to move
        x += dx;
    }
}