Olá a todos!
Após a finalização desse exercício algo me irritou, toda vez que eu clicava em Alt+Shift aparecia a mensagem no alert mas mesmo assim a bolinha era desenhada. Tentei alguns códigos alternativos e cheguei à esse resultado:
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
var cores = ["blue", "red", "green"];
var count = 0;
pincel.fillStyle = "lightgrey";
pincel.fillRect(0,0,600,400);
function mudaCor(){
count ++;
if(count>=cores.length){
count = 0;
}
return false
}
var raio = 5;
function exibeBolinha(evento){
var x = evento.pageX -tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.shiftKey && evento.altKey){
alert("Por favor, aperte apenas SHIFT ou ALT");
} else {
if (evento.altKey){
raio = raio-5;
}
else if(evento.shiftKey){
raio = raio + 5;
}
pincel.fillStyle = cores[count];
pincel.beginPath();
pincel.arc(x, y, raio, 0,2 * 3.14);
pincel.fill();
console.log(evento);
}
}
tela.onclick = exibeBolinha;
tela.oncontextmenu = mudaCor;
</script>
Assim resolvi meu toc com aquela bolinha rs. Não levei em consideração o limite do raio nesse exercício