bolinha com sombra

fiz uma pequena alteraçao no codigo coloquei a bolinha azul um pouco mais abaixo e percebi que a bolinha azul estava voltando junto com a vermelha , mas a minha finalidade era voltar apenas a bolinha vermelha enquanto que a bolinha azul somente iria e a vermelha voltaria, estou tentando resolver este problema se alguém souber

segue o codigo:

<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,cor){

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

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


    var x = 10;
    var sentido = 1;
    var y = 20
     function atualizaTela(){

       limpaTela();

        if(x > 100){

        y = 100
       }


       if (x > 200){

          sentido = -1; 

        }
          else if(x < 0){
        sentido = 1;


        }
     desenhaCirculo (x,y,10,"blue")
     x= x+ sentido



     console.log(x);
     if (sentido-1){
      desenhaCirculo(x,20,10,"red")
     }

      }  
        setInterval (atualizaTela,20);


</script>