Vou dar a minha opinião aqui:
Não da pra fazer dessa forma por causa dessa parte do código:
if(evento.shiftKey && evento.altKey){
else if(evento.shiftKey && raio<=40){
raio = raio+10
}else if(evento.altKey && raio>=5){
raio = raio-5
}
Mais especificamente na primeira linha você inseriu &&
que significaria um "e" ou "and", então lendo ficaria algo como: " SE ( 'tecla shift ativada' E 'tecla alt ativada') fazer isso...", mas a ideia não é pressionar as duas teclas ao mesmo tempo para chamar o if
, e sim uma delas para cada tecla, então teria que ter utilizado ||
que significa "ou" ou "or".
Logo em seguida na mesma citação, encontrei outro "erro" você inseriu else if
antes mesmo de usar um if
na indentação da instrução em questão.
Tente seguir uma estrutura que comece com um únicoif
, se precisar de mais cláusulas ai então segue com os else if
Eu não quero me aprofundar muito porque também não sei o suficiente pra te explicar em detalhes, mas quis tentar... aqui em baixo vou colocar como eu acho que deveria ser o código, eu só mudei aquela parte citada mesmo!
<meta charset="UTF-8">
<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', 'yellow', 'green'];
var coresid= 0;
var raio = 10
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.shiftKey || evento.altKey){
if(evento.shiftKey && raio<=40){
raio = raio+10
}else if(evento.altKey && raio>=5){
raio = raio-5
}
}
pincel.fillStyle = cores[coresid];
pincel.beginPath();
pincel.arc(x, y,raio, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
tela.onclick = desenhaCirculo;
function mudaCor() {
coresid++;
if(coresid>=cores.length){
coresid= 0
}
return false;
}
tela.oncontextmenu = mudaCor;
</script>