[Sugerencia] Circulo que rebota de izquierda a derecha

Mi código quedo asi a diferencia del resultado general.
<!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>Programa - CirculoIzquierdaDerecha</title>
    <canvas width="600" height="400"></canvas>
</head>
<body>
    <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 = 1;
        var haciaLaDerecha = true;

        function acturalizarPantalla(){
            limpiarPantalla();
            disenharCircunferencia(x,20,10);
            if(haciaLaDerecha){
                x++;
                if(x > 400){
                    haciaLaDerecha = false;
                }
            }else {
                x--;
                if (x < 0 ){
                    haciaLaDerecha = true;
                }
            }
            }
        setInterval(acturalizarPantalla,10);
    </script>
</body>
</html>