A bolinha sem controle

ola, ao rodar o codigo , acontece que a bolinha começa indo certinho e volta certinho mas na segunda vez que a bolinha avança ela dispara e sai do canvas e fica indo e voltando rapidamente até parar de vez, alguem saberia dizer porque isto acontece porque nao tenho o controle da bolinha

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

<script >

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


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

      function desenhaCirculo ( x,y, raio){

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

     function limpaTela(){
       pincel.clearRect(0,0,600,400);
     }


    var x = 10;
     function atualizaTela(){

       limpaTela();
       desenhaCirculo(x,20,10)
        x++






        if (x < 11){
      setInterval (atualizaTela,20);

        }

        if(x > 200){
        setInterval(volta,20)

        }


        function volta(){

       limpaTela();
       desenhaCirculo(x,20,10)
        x--
       }
     }












setInterval (atualizaTela,20);
//setInterval(volta,20);

</script>