Balão Cresce e Diminui

Antes da correção do exercício, escrevi um código que funcionou parcialmente, conforme foi pedido. Porém, quando vou clicando na tela, os balões vão crescendo gradualmente. sem que eu precise apertar o Shift. Já no Alt, se eu ficar segurando e clicando, vão diminuindo. Gostaria somente de entender o por que deste "problema"

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

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

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

    var raio = 10;
    var raioMaximo = 40;

    function desenhaCirculo(evento) {

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

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


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

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

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

    }

    tela.onclick = desenhaCirculo;

</script>