Animaçao das bolinhas

Tentei juntar todas as aulas em uma só e meio q me perdi, precisava de uma orientaçao, as bolinhas bugam quando inicio, queria saber tambem como eu poderia diminuir as funçoes, o objetivo era cada bolinha ir pra um lado cima, baixo esquerda e direita, mas elas ficam piscando...

o codigo ficou assim:

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

<script>

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

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

function desenhaBolinea(x, y, cor){
    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(x,y,10,0,2*Math.PI);
    pincel.fill();
}
desenhaBolinea("red", 300,200);


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

function msgConsole(){
        console.log('Chamei Função');
}

 var d = 330;
 var e = 270;
 var c = 170; 
 var b = 230;
 var sentido = 1 ;


function moverBolineaD(){



    if( d > 600) {
            sentido = -1;
        } else if (d < 330) {
            sentido = 1;
        } 

    desenhaBolinea(d,200,"black");
    d= d + sentido;

 }
    setInterval(moverBolineaD,0.5);



function moverBolineaE(){


         if( e > 270) {
            sentido = -1;
        } else if (e < 0) {
            sentido = 1;
        } 

    desenhaBolinea(e,200,"green");
    e= e + sentido;
}

setInterval(moverBolineaE,0.5);


function moverBolineaC(){


         if( c > 170) {
            sentido = -1;
        } else if (c < 0) {
            sentido = 1;
        } 

    desenhaBolinea(300,c,"blue");
    c = c + sentido;
}

setInterval(moverBolineaC,0.5);

function moverBolineaB(){

    limparTela();
         if( b > 400) {
            sentido = -1;
        } else if (b < 230) {
            sentido = 1;
        } 

    desenhaBolinea(300,b,"red");
    b = b + sentido;
}

setInterval(moverBolineaB,0.5);
</script>