Acho que estou pegando o fio da meada.
<canvas width="600" height="400"></canvas>
<script>
let canvas = document.querySelector('canvas');
let pincel = canvas.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0 , 0, 600, 400)
let raio = 10;
function desenhaCirculo(event) {
let x = event.pageX - canvas.offsetLeft;
let y = event.pageY - canvas.offsetTop;
pincel.fillStyle = 'blue';
pincel.beginPath();
console.log("Eixo X: " + x + " Eixo Y: " + y)
console.log(event)
if(event.shiftKey == true && raio < 40) {
raio = raio + 10;
pincel.arc(x, y, raio, 0, 2 * 3.14)
pincel.fill();
} else if( event.altKey == true && raio >= 15) {
raio = raio - 5;
console.log(raio)
pincel.arc(x, y, raio, 0, 2 * 3.14)
pincel.fill();
}
else {
//Quando o shift é solto volta ao estado inicial
// pincel.arc(x, y, raio = 10, 0, 2 * 3.14)
pincel.arc(x, y, raio, 0, 2 * 3.14)
pincel.fill();
}
}
canvas.onclick = desenhaCirculo;
</script>
