<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
    var canvas = document.querySelector('canvas');
    var brush = canvas.getContext('2d');

    brush.fillStyle = 'lightgray';
    brush.fillRect(0, 0, 600, 400);


    function drawCircle(x, y, radius) {
        brush.fillStyle = 'blue';
        brush.beginPath();
        brush.arc(x, y, radius, 0, 2 * Math.PI);
        brush.fill();
    }

    function cleanScreen() {
        brush.clearRect(0, 0, 600, 400);
    }
    var x = 20;
    var movement = 1;

    function rollCircle() {
        cleanScreen();

        if (x >= 590) {
            movement = -1;
        } else if (x <= 10) {
            movement = 1;
        }

        drawCircle(x, 20, 10);
        x = x + movement;

    }
    setInterval(rollCircle, 10);
</script>