Programa_4

<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 disenharCircunferencia(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 sentido = 1;

        function actualizarPantalla(){

            limpiarPantalla();
             if(x > 400){
            sentido = -1;
        }else if(x < 100){
            sentido = 1;

        }

        disenharCircunferencia(x,250,100);
        x = x +sentido;

    }

        setInterval(actualizarPantalla,1);



</script>