Бесконечная анимация движения canvas

Нужно, чтобы астероид пролетал за границы экрана и потом снова вылетал с другой стороны. И так по-кругу. Помогите, пожалуйста (Я новичок и делаю чисто в обучающих целях, не судите код строго :) )

HTML:

<h2>14) Анимация Canvas</h2>

JS:

    window.onload = () => {
    let canvas = document.querySelector('#canvas2');
    let ctx = canvas.getContext('2d');
    // Background
    let backgroundImg = new Image();
    backgroundImg.src = 'https://img1.goodfon.ru/original/640x480/2/bf/kosmos-zvezdy-planeta-5363.jpg';
    // Main objects
    let asteroid = new Image();
    asteroid.src = 'img/asteroid.png';
    let asteroid2 = new Image();
    asteroid2.src = 'img/asteroid.png';
    let x = 0;
    let y = getRandomNum(0, 400);
    backgroundImg.onload = () => {
        ctx.drawImage(asteroid, x, y, 75, 75);
    }
    draw();
    function draw() {
        ctx.drawImage(backgroundImg, 0, 0, 640, 480);
        ctx.drawImage(asteroid, x, y, 75, 75);
        let inter = setInterval(moveAsteroid, 5);
        function moveAsteroid() {
            if(x == 715) {
                clearInterval(moveAsteroid);
            }
            else {
                ctx.clearRect(0,0, 640, 480);
                ctx.drawImage(backgroundImg, 0, 0, 640, 480);
                ctx.drawImage(asteroid, x, y, 75, 75);
                x++;
            }
        }
    }
}
function getRandomNum(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}