Vai e Volta. Com seleção de cor e tamanho

Fiz o código do exercício adicionando opção de alterar a cor de fundo e a cor da bola.

Além disso pode-se alterar o tamanho que já vai ser calculado a alteração do sentido sem que a bola fique cortada.

O que acharam?

<canvas width="1600" height="720">

</canvas>
<br>
Selecione a cor da bola <input id="bola" type="color">

<br>
Selecione a cor do fundo<input id="fundo" type="color">

<br>
Digite o tamanho da bola<input id="tamanho" type="number"> 

<script>

    var tela = document.querySelector('canvas');
    var caneta = tela.getContext('2d');
    caneta.fillStyle = 'blue';
    caneta.fillRect(0,0 , 1600,720);

    var corBola = document.querySelector('[id="bola"]');
    var corFundo = document.querySelector('[id="fundo"]');
    var tamanho = document.querySelector('[id="tamanho"]');
    function desenhaCirculo(x, y, raio){

        caneta.fillStyle = corBola.value;
        caneta.beginPath();
        caneta.arc(x, y, raio, 0, 2 * Math.PI);
        caneta.fill();

    }

    function limpaTela(cor){
        caneta.clearRect(0,0 , 1600,720);
        caneta.fillStyle = cor;
        caneta.fillRect(0,0 , 1600,720);
    }

    function exibeMensagemConsole(){
        console.log('Chamei Função');
    }
    var x = 20;
    var y = 20;
    var sentido = 1;
    function atualizaTela(){
        limpaTela(corFundo.value);

        if (x > 1600-tamanho.value){
            sentido = -1;
        }
        else if (x < tamanho.value){
           sentido = 1;
        }
        desenhaCirculo(x,tamanho.value,tamanho.value);
        x = x + sentido;

    }   


    setInterval(atualizaTela, 5); 

</script>