Les comparto con ustedes mi solución. Lo que use fue un if else y un booleano. Si alguno tiene alguna sugerencia para hacer el código más eficiente, eficaz y efervescente, no dude comentar lo o tomar este código para que mejore su quality of life.
<canvas width="600" height="400"></canvas>
<script>
pantalla = document.querySelector("canvas");
pincel = pantalla.getContext("2d");
gradiante = pincel.createLinearGradient(50,150,150,400);
//Agregar los 2 colores
gradiante.addColorStop(0,"#8ba0b5");
gradiante.addColorStop(1,"#d9e1ea");
//usar fill tyle y dibjar el rectangulo
pincel.fillStyle= gradiante;
pincel.fillRect(0,0,600,400);
function disenharCircunferencia(x,y,radio) {
pincel.fillStyle="blue";
pincel.beginPath();
pincel.arc(x,y,radio,0,Math.PI*2);
pincel.fill();
}
function limpiarPantalla(){
//Propiedad dentro de pincel para limpiar la pantalla
//Esto hace que el fondo este y no se borre
pincel.clearRect(0,0,600,400);
pincel.fillStyle=gradiante;
pincel.fillRect(0,0,600,400);
}
var x = 0;
var interruptor = true;
function actualizarPantalla() {
limpiarPantalla();
disenharCircunferencia(x,20,10);
if (interruptor) {
x++;
if (x>=600) {
interruptor= false;
}
}else{
x--;
if (x==0) {
interruptor=true;
}
}
console.log(x);
}
//Al PASAR actualizarPantalla como parametro, no lleva()
setInterval(actualizarPantalla, 10);
</script>