CIrculo en movimiento + reinicio de valor

¡Hola Luis!

En el código que compartiste, se dibuja un círculo que se mueve horizontalmente en la pantalla y se reinicia su posición una vez que llega al final del canvas. Si deseas reiniciar el valor de la variable x a cero, puedes agregar un botón en tu HTML y agregarle un evento click que llame a una función que reinicie el valor de x a cero. Por ejemplo:

<canvas width="600" height="400"></canvas>
<button onclick="reiniciar()">Reiniciar</button>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function disenarCirculo(x, y, radio) {
        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*Math.PI);
        pincel.fill();
    }

    function limpiarCirculo() {
        pincel.clearRect(0, 0, 600, 400);
    }

    var x = 0;
    function limpiarPantalla() {
        limpiarCirculo();
        disenarCirculo(x, 20, 10);
        x++;
        //Este parámetro se utiliza para reiniciar el valor de x a cero una vez que el círculo dibujado llega al final del canvas
        if (x >= 600) {
            x = 0;
        }
    }

    setInterval(limpiarPantalla, 5);

    function reiniciar() {
        x = 0;
    }
</script>

Espero que esta solución te ayude. ¡Buenos estudios!