Mudar cor | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<canvas width="600" height="400"></canvas> <script> var tela = document.querySelector('canvas'); var pincel = tela.getContext('2d'); pincel.fillStyle = 'lightyellow'; pincel.fillRect(0, 0, 600, 400); function desenhaCirculo(evento) { var x = evento.pageX - tela.offsetLeft; var y = evento.pageY - tela.offsetTop; var raio = 10; console.log(x + ',' + y); if (evento.shiftKey) { raio = raio + 20; } pincel.fillStyle = 'lightblue'; pincel.beginPath(); pincel.arc(x, y, raio, 0, 2 * 3.14); pincel.fill(); } tela.onclick = desenhaCirculo; </script>

Oi Thuane, tudo bem? É possível sim! Para isso, precisamos fazer algumas alterações no código:

Precisamos passar a cor inicial da bolinha (sem estar com o shift pressionado), para cima da verificação onde confere se o shift está pressionado, dessa maneira:

pincel.fillStyle = 'lightblue';
if (evento.shiftKey) {
    raio = raio + 20;
}

E agora, dentro da nossa verificação, você pode alterar a cor para qual você quiser, com o mesmo comando pincel.fillStyle. Veja abaixo:

pincel.fillStyle = 'lightblue';

if (evento.shiftKey) {
    raio = raio + 20;
    pincel.fillStyle = 'blue';
}

Agora, sempre quando pressionarmos a tecla shift, a bolinha grande vai mudar de cor para azul!

E o código continua o mesmo, só foi preciso alterar onde a cor da bolinha foi declarada, pois se fizermos dessa forma:

if (evento.shiftKey) {
      raio = raio + 20;
      pincel.fillStyle = 'blue';
}

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

Não irá funcionar! Já que o comando pincel.fillStyle = 'lightblue'; vai sempre sobrescrever a cor inserida dentro da verificação, já que vem depois dessa verificação!

Se algo ficou confuso, não hesite em me responder aqui para que eu possa te ajudar melhor! Espero ter ajudado, qualquer outra dúvida estou a disposição, abraços e bons estudos!