ejercicio

<canvas width="600" height="400">




</canvas>




<script >

    var pantalla=document.querySelector("canvas");
    var pincel= pantalla.getContext("2d");

    pincel.fillStyle= "lightgrey"; 
    pincel.fillRect(0,0,600,400);


    function disenarCircuferencia(x,y,radio){
    pincel.fillStyle="blue";
    pincel.beginPath();
    pincel.arc(x,y,radio,0,2*Math.PI);
    pincel.fill();
    }



function limpiarpantalla(){


    pincel.clearRect(0,0,600,400);

}


var x = 0;
var inicio=1;
function actualizarPantalla(){

    limpiarpantalla();
    if (x>600) {
    inicio=-1;}
    else if (x<0){
        inicio=1;
    }
    disenarCircuferencia(x,20,10);
    x=x+inicio;

}



setInterval(actualizarPantalla,40)









    ;   // permite realizar un contador



    //disenarCircuferencia(20,40,20)


</script>