Minha condição if ao testar se x == 600 não está funcionando, alguém consegue me ajudar?

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

<script>

    var tela = document.querySelector("canvas"); //Criar tela
    var pincel = tela.getContext("2d"); //Criar um pincel 2d na tela
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400);

    var x = 20;
    var y = 20;

    function desenhaCirculo(x, y) {

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

    function limpaTela() {

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

    function bolinhaPositiva() {

        limpaTela();
        desenhaCirculo(x, y);
        x++;
        testaX();
    }


    function bolinhaNegativa() {

        limpaTela();
        desenhaCirculo(x, y);
        x--;
        testaX();
    }

    function testaX() {

        if(x == 600) {

            direcao = true;
        }

            if(x == 20) {

            direcao = false;
        }
    }

    if(direcao) {

        setInterval(bolinhaNegativa, 20);

    }
        else {

            setInterval(bolinhaPositiva, 20);
        }

    var direcao;    

</script>