Ejercicio que vaya y vuelva | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="600px", height="400px"></canvas>
    <script>
        var pantalla=document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = "lightgrey";
        pincel.fillRect(0,0,600,400);

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

        function limpiarPantala(){
            pincel.clearRect(0,0,600,400);
        }
        var x = 0;
        var xmen=1;
        function actualizarPantalla(){
            limpiarPantala();
            if(x>599){
                xmen=-1;
            }
            else if(x<0){
                xmen=1;
            }
            disehnarCircunferencia(x,20,10); 
            x=x+xmen;
        }
        setInterval(actualizarPantalla,5);

    </script>    
</body>
</html>