Boa tarde Ângelo. O que está acontecendo é que seu código está com dois problemas na estrutura dele. Na string 23 e na string 27, dentro da função desenhaCirculo, você colocou dois else's que estão garantindo esse problema de funcionamento no shift e no alt. Com o else{ raio = 40}, ao pressionar alt, você não apenas ativa o comando para o altKey como também ativa o else, que sempre deixa o raio da sua bolinha em 40. Da mesma forma, no else{ raio = 10}, ao pressionar shift, ele sempre mantém o raio da sua bolinha em 10. O que você pode fazer para reparar o seu código é retirá-los. Uma dica também que eu dou é alterar a string 25 e mudar if(evento.altKey && raio >= 10) para if(evento.altKey && raio > 10), pois assim seu raio mínimo será 10, e não 5. Anexarei seu código, com os erros que visualizei, bem como o código reparado.
<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 cores = ['blue','red','green'];
var proximaCor = 0
var raio = 10
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[proximaCor];
pincel.beginPath();
if(evento.shiftKey && raio <= 40) {
raio = raio + 10;
} else if(evento.altKey && raio > 10) {
raio = raio - 5;
}
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor() {
proximaCor++
if (proximaCor >= cores.length){
proximaCor = 0
}
alert('cor alterada para ' + cores[proximaCor] );
console.log(proximaCor)
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>
<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 cores = ['blue','red','green'];
var proximaCor = 0
var raio = 10
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[proximaCor];
pincel.beginPath();
if(evento.shiftKey && raio <= 40) {
raio = raio + 10;
}else{ raio = 40}; //o problema do exercício está nessa string. Esse else não deve existir.
if(evento.altKey && raio >= 10) { //nessa string o raio deve ser maior que 10, pois se for raio >= 10, seu raio mínimo será 5
raio = raio - 5;
}else{ raio = 10}; //o problem do exercício está também nesse else.
pincel.arc(x, y, raio, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
function mudaCor() {
proximaCor++
if (proximaCor >= cores.length){
proximaCor = 0
}
alert('cor alterada para ' + cores[proximaCor] );
console.log(proximaCor)
return false;
}
tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;
</script>
