1
resposta

Desta forma está correto?

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

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

            pincel.fillStyle = 'grey';
            pincel.fillRect(0, 0, 600, 400);

            var raio = 10;

            function desenhaCirculo(evento) {

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

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

                if(evento.shiftKey){
                    if (raio <= 40)
                        raio = raio + 10; 
                }

                if(evento.altKey){
                    if(raio > 10){
                        raio = raio - 5;
                    }
                }

                pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, raio, 0, 2 * 3.14);
                pincel.fill();

            }

            tela.onclick = desenhaCirculo;
        </script>
1 resposta

Sim esta correto! Porem tem algumas modificações que podem ser bem vindas, como por exemplo a variável incremento. No final da no mesmo mas futuramente onde você tiver muitos números iguais sera difícil substituir um por um, variável ajuda.

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

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

            pincel.fillStyle = 'grey';
            pincel.fillRect(0, 0, 600, 400);

            var raio = 10;
            var incremento = 10;

            function desenhaCirculo(evento) {

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

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

                if(evento.shiftKey){
                    if (raio <= 40)
                        raio = raio + incremento; 
                }

                if(evento.altKey){
                    if(raio > 10){
                        raio = raio - incremento;
                    }
                }

                pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, raio, 0, 2 * 3.14);
                pincel.fill();

            }

            tela.onclick = desenhaCirculo;
        </script>

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software