Não entendi o código incluido na publicação "Acho que dessa forma é menos complicado...."

Não entendi este modelo publicado no fórum com o titulo "Acho que dessa forma é menos complicado...."

function desenhaCirculo(evento) {

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

         if(evento.shiftKey){
            raio = raio+20;
         }
         else if (raio > 30 || raio < 5){
            raio = 10;
         }
         else if (evento.altKey){
            raio = raio - 5;
         }

Porque ele faz "raio = raio + 20" se o raio já começa com 10?

Assim ele não estará incrementando de 10 em 10 mas sim de 20 em 20 quando aperta o shift. Não entendi o raciocinio do colega.

Também não entendi o primeiro else if "(raio>30 || raio < 5)". Ok, ele esta declarando que se o raio for maior que 30 e menos 5 ele deve assumir o tamanho 10, mas não é isso que o enunciado pediu, pelo menos não foi o que eu entendi. Pelo enunciado o raio não pode ultrapassar 40 e não pode ser menor que 5. Estes valores estão corretos?

Aguardo explicação.