Minha solução foi um pouco diferente...

Fiz desse jeito, e funcionou. Adicionei a funcionalidade do usuário escolher a cor da bolinha também.

<script type="text/javascript">
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        var paleta = document.querySelector('input');

        pincel.fillStyle = 'whitesmoke';
        pincel.fillRect(0, 0, 600, 400);

        function desenhaCirculo(x, y, raio) {
            pincel.fillStyle = paleta.value;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, Math.PI*2);
            pincel.fill();
        }

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

        var x = 20;
        var y = 20;
        var raio = 10;

        var velocidadeXBola = 4; 
        var velocidadeYBola = 4;


        function velocidadeBola() {
            if(x + raio > tela.width || x - raio < 0){
                 velocidadeXBola *= -1;
            } 

            if(y + raio > tela.height || y - raio < 0) {
                velocidadeYBola *= -1;
            }

            x = x + velocidadeXBola;
            y = y + velocidadeYBola;
        }

        function movimentaBola() {
            limpaTela();
            desenhaCirculo(x, y, raio);
            velocidadeBola();
        }

        setInterval(movimentaBola, 10);

    </script>