Estoy dibujando círculos animados dentro de un lienzo, y hasta ahora logré hacerlo de izquierda a derecha dentro del lienzo. Lo que debo hacer es, cuando el círculo alcance su posición más a la derecha, hacer que comience su camino (de izquierda a derecha) nuevamente, pero en una posición inferior. Estoy tratando de cambiar su posición en al menos el diámetro del círculo, hasta ahora sin éxito. ¿Alguna idea de cómo puedo lograr esto? ¿Es mejor hacerlo parte de la animación o hacer que el movimiento de izquierda a derecha sea un bucle simple con un cambio de posición al final? Mi código hasta ahora es el siguiente:

 var canvas3 = document.getElementById("canvas3"); canvas3.width = 300; canvas3.height = 500; var c3 = canvas3.getContext("2d"); var radius = 13; var x = radius; var y = radius; var dx = 1; var dy = 0; function animate3() { requestAnimationFrame(animate3); c3.clearRect(0, 0, 300, 500); if (x + radius > 300 || x - radius < 0) { dx = 0; y + y; } if (y + radius > 500 || y - radius < 0) { dy = 0; } x += dx; y += dy; c3.beginPath(); c3.arc(x, y, 12, 0, Math.PI * 2, false); c3.stroke(); c3.fillText(5, x - 3, y + 3); } animate3();