Hola a tod@s. Comparto mi código.Es diferente porque traté de realizarlo sin consultar los tips del instructor.
<!DOCTYPE html>
<html>
<meta charset="UTF-8"> <!configuracion juego caracteres>
<canvas width="600" height="400"></canvas> <!crea un contenedor para gráficos operado desde javascript>
</html>
<script>
var pantalla=document.querySelector("canvas");//selecciona el entorno htlm en que vamos a trabajar
var graficar=pantalla.getContext("2d");//activa herramientas de dibujo en entorno seleccionado
function dibujar_rectangulo(x,y,a,b,color){
graficar.beginPath();//dibuja el borde
graficar.lineWidth = "2";
graficar.strokeStyle = "brown";
graficar.rect(x,y,a,b);
graficar.stroke();
graficar.fillStyle=color;//dibuja el relleno
graficar.fillRect(x,y,a,b);
graficar.fill();
}
function escribir_texto(x,y,texto) {//funcion para escribir texto
graficar.font="15px Georgia";
graficar.fillStyle="black";
graficar.fillText(texto,x,y);
}
dibujar_rectangulo(0,0,600,400,"lightgrey");//rectángulo patrón para dibujar sobre él
function dibujar_circulo(x,y,radio){
graficar.fillStyle="blue";
graficar.beginPath();
graficar.arc(x,y,radio,0,2*Math.PI);//dibuja circulo
graficar.fill();
}
var x=0;
function actualizar_pantalla(){
if(x<600){
graficar.clearRect(0,0,600,400);
dibujar_circulo(x,100,20);}
else{
graficar.clearRect(0,0,600,400);
dibujar_circulo(1200-x,100,20);}
if(x<1200){
x++;}
else{x=0;x++;}
}
setInterval(actualizar_pantalla,2);
</script>
