por que minha bolinha não volta?

A bolinha não volta porque a rotina de "desenhaida" é executada direto, ele não entra nessa parte final onde você compara o valor de x para escolher qual direção executar.

Para resolver isso, tente agrupar a lógica de seleção de direção numa função, e mande executar ela em intervalos de tempo regulares. Segue um exemplo de seu código com esta alteração.

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

<script>

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

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

var x = 20;
var anima = 0;


function desenhaCirculo(y, raio){

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

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


function desenhaida(){

    limpaTela();
    desenhaCirculo(50, 10);
    x++;
}

function desenhavolta(){

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


function ControlarMovimento(){
    if(x >= 600){
        anima = -1;
        console.log("abacate");
    }
    if(x <= 20){
        console.log("abacaxi");
        anima = 1;
    }

    if(anima == 1){
        desenhaida();
    }
    if (anima == -1){
        desenhavolta();
    }

}

setInterval(ControlarMovimento, 10);
</script>

Muito obrigada Daniel, entendi agora o que acontece. :)