Hola, les comparto mi código, el circulo en lugar de ir en horizontal va en diagonal, también tiene un evento, para hacer que vaya más rápido y no haya que esperar a que llegue, y agregué un cambio color.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anima</title>
</head>
<body>
<canvas class="lienzo" width="600" height="400"></canvas>
<script>
let canvas = document.querySelector(".lienzo");
let ctx = canvas.getContext("2d");
let i = 0;
let status = false;
let colors = ["#EC5800","#2E8B57"];
let cSelect = 0;
canvas.addEventListener("click", ciclo); //esto hace que el circulo vaya un poco más rápido.
ctx.fillStyle = "lightgrey";
ctx.fillRect(0,0,600,400);
function drawCircle(x,y,radio){
ctx.fillStyle = colors[cSelect];
ctx.beginPath();
ctx.arc(x,y,radio,0,2*3.14); //posición en x, en y, el radio del circulo, el ángulo, y dos veces pi.
ctx.fill();
}
function clear(){
ctx.clearRect(0,0,600,400);
ctx.fillStyle = "lightgrey";
ctx.fillRect(0,0,600,400);
}
function ciclo(){
clear();
console.log("Se ha creado un circulo");
drawCircle(i*10,i*10,10); //modifico las dos coodernadas porque quiero que vaya en diagonal.
//también las multiplico por 10 para ver mejor el movimiento.
if(status == false){
cSelect = 0;
i++;
if(i >= 40){
status = true;
}
}
if(status == true){
cSelect = 1;
i--;
if(i <= 1){
status = false;
}
}
}
setInterval(ciclo, 1000);
</script>
</body>
</html>
Compartan sus códigos.
