Por si les interesa el código sobre unas mejoras extras que no pedía el programa. Canvas es muy divertido jaja, espero se estén divirtiendo con esa funcionalidad tanto como yo
<canvas width="800" height="500"> </canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle= "black";
pincel.fillRect(0,0,800,500);
function disenharCircunferencia(x,y,radio){
pincel.fillStyle=colores[posicion];
pincel.beginPath();
pincel.arc(x,y,radio,0,2*Math.PI);
pincel.fill();
}
function limpiarPantalla(){
pincel.clearRect(0,0,800,500);
}
var x=0;
var bandera=true;
var y=50;
var colores=["blue","yellow","orange","red"];
var posicion=0;
function actualizarPantalla(){
if(bandera){
if(x==800){
bandera=false;
y=y+50;
if(y==500){
x=0;
y=0;
posicion++;
if(posicion==colores.length){
posicion=0;
}
}
}
else{
limpiarPantalla();
disenharCircunferencia(x,y,20);
x++;
}
}
else{
if(x==0){
bandera=true;
y=y+50;
}
else{
limpiarPantalla();
disenharCircunferencia(x,y,20);
x--;
}
}
}
setInterval(actualizarPantalla,1);
</script>
