<canvas width="600px" height="400px"></canvas>
<script type="text/javascript">
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var cor = 'blue';
var raio2 = 10;
pincel.fillStyle = 'gray';
pincel.fillRect(0,0,600,400);
function desenhaCirculo(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;;
var shift = evento.shiftKey;
pincel.fillStyle = cor;
if (shift == false) {
pincel.beginPath();
pincel.arc(x,y,raio2,0,2*3.14);
pincel.fill();
}
if (shift == true) {
pincel.beginPath();
pincel.arc(x,y,raio2,0,2*3.14);
pincel.fill();
raio2 = raio2 + 10;
if (raio2 == 60) {
raio2 = 20;
}
}
if(evento.altKey) {
raio2 = raio2 - 5;
if (raio2 <= 10 ) {
raio2 = 10;
}
}
console.log(x+','+y);
}
tela.onclick = desenhaCirculo;
</script>