Pessoal, estou combinando dois exercícios e tentando fazer o desenho com o mouse junto com a variação do tamanho da bolinha, como se fosse aumentar ou diminuir o pincel.
Porém, quando pressiono Shift, a bolinha automaticamente ganha o maior tamanho e quando pressiono Alt ela volta para o mínimo. Não está havendo o incremento gradual.
Alguém pode me sinalizar o que estou fazendo de errado?
Obrigado!
<meta charset="UTF-8">
<title>MÓDULO II - EXERCÍCIO DESENHANDO COM O MOUSE</title>
<canvas width="1200" height="800"></canvas>
<br>
Escolha uma cor: <input type="color">
<script type="text/javascript">
var tela = document.querySelector ("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle="lightgrey";
pincel.fillRect(0, 0, 1200, 800);
var raio = 10;
var incremento = 5;
var desenha = false;
var paleta = document.querySelector("input");
tela.onmousemove = function (evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if (evento.shiftKey && evento.altKey) {
alert("Atenção! Pressione apenas uma tecla!");
} else if (evento.shiftKey && raio + incremento <= 40) {
raio = raio + incremento;
} else if (evento.altKey && raio - incremento >= 10) {
raio = raio - incremento;
}
if (desenha) {
pincel.fillStyle=paleta.value;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
console.log (x + " , " + y);
}
tela.onmousedown = function () {
desenha = true;
}
tela.onmouseup = function () {
desenha = false;
}
</script>