Escolha a cor da sua BOLETA PULSANTE indo e voltando!!!!!!

<canvas width="600" height="400"></canvas>
<br>
    Escolha a cor da sua BOLETA PULSANTE!!!! <input type="color">

<script>

    var tela = document.querySelector("canvas");

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

    var paleta = document.querySelector("input");

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

    raio = 19    

    var fatorCrescimento = 0;

    function desenhaBolinha(x, y, raio) {

        pincel.fillStyle = paleta.value //sempre pega o valor atual da PALETA, OU SEJA DO INPUT!!!
        pincel.beginPath();
        pincel.arc(x , y, raio, 0, 2 * Math.PI);
        pincel.fill();

    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600,400);

    }

    var x = 20;

    var sentido = 1;

    function vaiEVolta() { //função da bolinha ir e voltar

        if(x > 600){

            sentido = -1;

        }else if(x < 0) {

            sentido = 1;

        }

    desenhaBolinha(x, 20, raio,);
    x = x + sentido;

    }

    function atualizaTela() {

     // limpamos sempre a tela para podermos desenhar um novo círculo
        limpaTela();

        vaiEVolta()

        if(raio > 30) {
            // o raio tem que diminuir

            fatorCrescimento = -1;

        } else if (raio < 20) {
            // o raio tem que aumentar

            fatorCrescimento = 1;

        }

        raio = raio + fatorCrescimento;

        desenhaBolinha(x, 20, raio,);
    }

    setInterval(atualizaTela, 20);

</script>