1
resposta

Fiz um pouco diferente

    <canvas width="600px" height="400px"></canvas>

    <script type="text/javascript">

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

        var cor = 'blue';



        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,10,0,2*3.14);
                pincel.fill();
            }
            if (shift == true) {
                pincel.beginPath();
                pincel.arc(x,y,30,0,2*3.14);
                pincel.fill();

            }
                console.log(x+','+y);


    }
        tela.onclick = desenhaCirculo;


    </script>
1 resposta

Bacana, Marcos!

Muito bacana tentar buscar outras formas, pois só assim conseguimos aprender de verdade

Qualquer dúvida nos procure

Um abraço e bons estudos