<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>