Variável raio / meu código não funciona.

No caso seu código deve ser alterado da seguinte forma:

• a variável raio deve ser inicializada:

• o teste if do shiftKey deve vir antes de desenhar o círculo e raio fixo "10" na chamada da função arc deve ser substituído pela variável raio:

Bom dia André teria como você colocar um trecho de código como exemplo !

Olá Renato,

Seu código deve ser alterado da seguinte forma:

• a variável raio deve ser inicializada:

  var raio = 10;

• o teste if do shiftKey deve vir antes de desenhar o círculo e raio fixo "10" na chamada da função arc deve ser substituído pela variável raio:

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

espero ter ajudado.

no caso o else seria todo o resto da função ! poderia fazer assim

function desenhaCirculo(evento) {

      if (evento.shiftKey){
          raio = raio + 10;
      }else{
      var x = evento.pageX - tela.offsetLeft;
      var y = evento.pageY - tela.offsetTop;
      pincel.fillStyle = 'blue';
      pincel.beginPath();
      pincel.arc(x, y, raio, 0, 2 * 3.14);
      pincel.fill();

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

Acredito não ser necessário o else pois o círculo deve ser desenhado de qualquer forma, estando ou não pressionado o shift.

O shift pressionado ou não apenas define se você deseja desenhar um círculo no tamanho atual ou com um tamanho maior.

Sendo assim a função ficaria como mostrei na resposta anterior.

André, boa noite. Ficou um tempo sem mexer no código, agora parece que quando eu clico em Shift ele acrescenta mais 10 na variável e quando eu solto o Shift não volta para a posição original. Oque fazer ? Segue código.

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

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

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();


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

    }

    tela.onclick = desenhaCirculo;

</script>

Olá Renato,

Se o comportamento desejado é este então você pode mover a declaração da variável raio para dentro da função desenhaCirculo:

<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; REMOVER DECLARAÇÃO DA VARIÁVEL AQUI

    function desenhaCirculo(evento) {

        var raio = 10; // INCLUIR DECLARAÇÃO DA VARIÁVEL AQUI

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

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();


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

    }

    tela.onclick = desenhaCirculo;

</script>