Não estou conseguindo mudar de cor quando aperto o ALT.

Olá Hugo, tudo certo?

O que está acontecendo é que quando você aperta ALT, o círculo rosa é desenhado e logo em seguida é desenhado um outro círculo azul em cima dele. Fiz algumas mudanças no código para resolver esse problema:

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

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

    pincel.fillStyle = 'gray';
    pincel.fillRect(0, 0, 900, 600);

    var raio = 10;

    function desenhaCirculo(evento) {

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

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

        pincel.fillStyle = 'blue';

        if (evento.shiftKey && evento.altKey) {

            alert("Só aperte uma tecla por vez.")

        } else if (evento.shiftKey && raio + 10 <= 40) {

            raio = raio + 10;

        } else if (evento.altKey && raio - 5 >= 10) {

            raio = raio - 5;
            pincel.fillStyle = 'pink';

        }

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

    }

    tela.onclick = desenhaCirculo;

</script>

Desse modo, a cor azul do pincel é definida antes e caso você aperte ALT será mudada para rosa, caso contrário o circulo será azul.

Espero ter ajudado, abraço!

Muito obrigado, Lorena!

Mas ainda há um erro... chega uma parte que a bolinha volta a ser azul, vc sabe o motivo?

Oi, isso acontece porque a cor só será mudada para rosa caso ALT esteja pressionado E raio-5 seja maior ou igual a 10.

Para resolver isso teríamos que fazer uma pequena mudança no código:

else if (evento.altKey) {

      pincel.fillStyle = 'pink';

      if (raio - 5 >= 10) {
           raio = raio - 5;
      }
}

Assim, sempre que o clique ocorrer com ALT pressionado a cor será rosa e a bolinha só ficará menor se o raio for maior ou igual a 15.

OBS: Essa foi a minha solução, provavelmente existem outras.