Usei o WHILE e não funciona. Por que?

Pessoal, to bem chateada que de todos os exercícios desta aula 03 eu não consegui resolver nenhum! To começando a pensar que talvez eu não consiga aprender lógica de programação... =(

Enfim, dramas a parte... Eu tentei fazer com que a bolinha plotada no canvas fosse diminuindo gradativamente a medida que eu pressionava 'alt' e aumentando a medida que eu pressionava 'shift'. Quis colocar um limite de tamanho, e pra isso eu usei o WHILE. Na minha cabeça o meu código escrito faz sentido, porém quando ele roda ele só plota bolinhas do tamanho 40 ou do tamanho 10, ele não aumenta e nem diminui gradativamente a medida que as teclas mencionadas são pressionadas.

Alguém me ajuda?

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

<script type="text/javascript">

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

    var raio = 10;

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

    function desenhaBolinha(evento) {

        var x = evento.pageX - tela.offsetLeft; 
        var y = evento.pageY - tela.offsetTop;


        if(evento.shiftKey) {
            while(raio < 40) {
            raio = raio + 10;
            }
        } 

        if (evento.altKey) {
            while(raio > 10) {
            raio = raio -5;
            }
        }

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x,y, raio, 0, 2*3.14);
        pincel.fill();


        console.log(x + '   ' + y);
    }

    tela.onclick = desenhaBolinha;


</script>