<canvas width= "800" height= "600"></canvas>

<script>

tela= document.querySelector("canvas");
pincel= tela.getContext("2d");

pincel.fillStyle= "darkgray";
pincel.fillRect(0, 0, 800, 600);

var raioAtual= 10;
var somaRaio= 10;
var diminuiRaio=5;
var raioMaximo= 40;
var raioMinimo= 10;

function desenhaCirculo(evento) {

    var x= evento.pageX - tela.offsetLeft;
    var y= evento.pageY - tela.offsetTop;

    pincel.fillStyle= "lightgreen";
    pincel.beginPath();
    pincel.arc(x, y, raioAtual, 0, 2 * 3.14);
    pincel.fill();

    console.log(x + "," + y);

    if (evento.shiftKey== true && evento.altKey== true) {

        alert("Por favor, aperte uma tecla por vez!");
    }

    if(evento.shiftKey == true) {

        raioAtual= raioAtual + somaRaio;

    } else if(evento.altKey== true) {

        raioAtual= raioAtual - diminuiRaio;
    }

    if(raioAtual > raioMaximo) {

        raioAtual = raioMaximo;

    } else if (raioAtual < raioMinimo) {

        raioAtual= raioMinimo;
    } 
}

tela.onclick= desenhaCirculo;

</script>