Aula 05 Aumentar raio

eu juntei o programa trocando de cor e do balão, porém só deu certo na segunda tentativa.

Primeira tentativa deu erro.

function desenhaCirculo(evento , mudaCor){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    var raioPlus = 10;

    pincel.fillStyle=cores[contarCor];
    pincel.beginPath();
    pincel.arc(x,y,raioPlus,0,2*3.14);
    pincel.fill();

    if (evento.shiftKey) {
        raioPlus = raioPlus + 20;
    }
}

Segunda tentativa deu certo.

function desenhaCirculo(evento , mudaCor){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    var raioPlus = 10;

    //  joguei meu if antes do pincel 
    if (evento.shiftKey) {
        raioPlus = raioPlus + 20;
    }

    pincel.fillStyle=cores[contarCor];
    pincel.beginPath();
    pincel.arc(x,y,raioPlus,0,2*3.14);
    pincel.fill();
}

alguém poderia explicar a lógica por que deu certo na segunda tentativa ?