usando a tecla shift vc aumenta infinitamente o circulo. usando a tecla ctrl vc diminui o circulo até o minimo de 10 (no caso eu deixei a condição >1 pra poder diminuir). usei alert para mostrar como mudar de tamanho e cor e qual cor está selecionada.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0, 0, 600, 400);
var cor = ['blue','red','green','yellow'];
var corAtual = 0;
var raio = 0
function desenhaCirculo(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(evento.shiftKey){
raio = raio+10;
}
if(evento.ctrlKey){
if(raio>1){
raio = raio-10;
}
}
pincel.fillStyle = cor[corAtual];
pincel.beginPath();
pincel.arc(x, y, raio+10, 0, 2*3.14);
pincel.fill();
console.log(x + ',' + y);
}
tela.onclick = desenhaCirculo;
function mudaCor(){
corAtual++;
if(corAtual >= cor.length){
corAtual = 0;
}
alert('Cor ' + cor[corAtual] + ' selecionada');
return false; // para não exibir o menu padrão do canvas
}
alert('Cor ' + cor[corAtual] + ' selecionada, aperte o botão direito do mouse para mudar de cor. Se estiver usando o celular mantenha o dedo na tela por alguns segundos');
alert('A tecla "shift" aumenta o tamanho do circulo e "ctrl" diminui');
tela.oncontextmenu = mudaCor;
</script>