Cuidado com a ordem da sua função...

Olá, pessoal!

Gostaria de mostrar minha evolução neste código, pois estava tudo certo mas na ordem errada e gastei alguns minutos até perceber.

Esse é o código que fiz primeiro:

<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);

function desenhaCirculo(evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    var raio = 10;
    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * 3.14);
    pincel.fill();
    var shift = evento.shiftKey 
        if(shift) {
            raio = 30;
        } else {
            raio = 10;} 
    console.log(shift);
}
tela.onclick = desenhaCirculo;
</script>

Inicialmente a 'var raio = 10' estava dentro da função 'desenhaCirculo'. Chequei via 'console.log(shift)' que o pressionamento do shift estava sendo capturado mas nada alterava no raio. Depois de alguns testes percebi que o pressionamento do shift só era verificado durante o clique. Voltei ao meu código e me dei conta de que fazia sentido, afinal toda a estrutura do 'evento.shiftKey' estava dentro da 'desenhaCirculo'. Voltando ao 'var raio = 10', resolvi tirá-lo da função e torná-lo uma variável global. Não sei por que, mas funcionou. Agora o raio do círculo estava sendo alterado, mas havia algo errado. Testei algumas vezes e o resultado era o seguinte:

1º clique teste SEM o shift pressionado, me retornava circulo com raio 10, OK; 
2º clique teste COM shift pressionado, me retornava circulo com raio 10, OPA; 
3º clique teste SEM shift pressionado, me retornava circulo com raio 30, achei o erro..

Retornei ao teste e visualizei que toda a estrutura do shift estava dentro da 'desenhaCirculo' mas DEPOIS das instruções para desenhar o círculo, por conta disto apenas o raio do círculo seguinte era alterado. Alterei a ordem e o código ficou assim:

<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;
function desenhaCirculo(evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    var shift = evento.shiftKey 
        if(shift) {
            raio = 30;
        } else {
            raio = 10;} 
    console.log(shift);
    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * 3.14);
    pincel.fill();
}
tela.onclick = desenhaCirculo;
</script>

Percebi que contrário ao que o ditado diz, a ordem dos fatores não altera o produto. Hahaha

Abraços!