Bolinha animada. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<body>
    <canvas width="600" height="400"></canvas>
    Mude a cor da bolinha: <input type="color">

    <script>

        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        var paletaCor = document.querySelector('input')

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

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

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

        var raio = 20
        var x = 20;
        var sentido= 1;
        var crescimento = 1


        function vaiVolta() {

            limpaTela();

            if(x > 598) {

                sentido = -1; 
            } else if(x < 10) {

                sentido = 1;
            }

            desenhaCirculo(x, 20, raio);
            x = x + sentido;
        } 


        function cresceDiminui() {

            limpaTela();

            if(raio > 10) {

                crescimento = -1;      
            } else if (raio < 5) {

                crescimento = 1;
            }

            desenhaCirculo(x, 20, raio);
            raio = raio + crescimento;
        }

        function bolinhaAnimada() {
            vaiVolta();
            cresceDiminui();
        }

        setInterval(bolinhaAnimada, 20)

    </script>
</body>

Eu juntei as duas funções em uma nova.

Coloquei um input para mudar a cor da bolinha também.

Essas foram algumas das alterações que fiz no meu código. Espero que tenha gostado.