Codigo nao funciona

Update, mudei a posicao do meu if para antes das instrucoes do pincel e funcionou. Realmente era esse o problema? Pq?

Obrigada!

Ei Pâmela, tudo bem? Vou tentar te ajudar com o possível. :)

Achei estranho o código ter funcionado apenas trocando a ordem. Note que você declara event.shiftKey=true na função desenhaCirculo. Ou seja, todas as vezes que você clicar no seu canvas e a função desenhaCirculo ser chamada, event.shiftKey será = true e entrará no seu if.

Porém, vamos recapitular essa função:

Primeiro: você está passando raio como parâmetro, sendo que a variável raio está sendo declarada dentro da função. Declare var raio=10 fora da função desenhaCirculo e retire o parâmetro raio de desenhaCirculo(evento, raio).

Segundo: você passa o parâmetro evento mas declara event.shiftKey, quando na verdade o correto seria evento.shiftKey.

O seu código deve ficar mais ou menos dessa forma:

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

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

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

    function desenhaCirculo(evento) {

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


        pincel.fillStyle = 'red';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

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


    tela.onclick = desenhaCirculo;

</script>

Quanto à ordem do if, a única diferença é que: quando antes das intruções do pincel, ao clicar no canvas você terá um circulo de raio maior instantaneamente, enquanto se for depois das instruções do pincel, o raio só aumentará no próximo clique.

Olá Pamela,

o código:

if (event.shiftKey){
  raio = raio + 10;
}

é responsável por verificar se a tecla shift foi pressionada e caso verdadeiro, incrementar 10 a variável raio. Para que o círculo fique maior, essa variável tem que ser alterada antes do comando de desenhar, que é o que acontece nesse trecho:

pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();

Se vc colocar o if após esse comando, o círculo será sempre desenhado com raio = 10.

Veja no codepen.

Editando: Assim que terminei de responder, verifiquei que o José já tinha respondido, mas só pra acrescentar, a propriedade shiftKey é somente leitura, por isso seu código funciona, mesmo fazendo a atribuição true a ela.