1
resposta

minha resolução

<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;
    pincel.fillStyle ='lightblue'
    pincel.beginPath ();
    pincel.arc (x,y,10,0,2*3.14);
    pincel.fill();
    console.log(x + ',' + y);

        if (evento.shiftKey && raio < 40) {

        pincel.fillStyle ='lightblue'
        pincel.beginPath ();
        pincel.arc (x,y,raio,0,2*3.14);
        pincel.fill();
        console.log(x + ',' + y);
        raio = raio + 10;

        }

        if (evento.altKey && raio > 10) {

        pincel.fillStyle ='lightblue'
        pincel.beginPath ();
        pincel.arc (x,y,raio,0,2*3.14);
        pincel.fill();
        console.log(x + ',' + y);
        raio = raio - 5;

        }
}

tela.onclick = desenhaCirculo;

</script>
1 resposta

Oi, Ana Carolina! Tudo bem por aí?

Muito bom, sua solução está correta, parabéns!

Caso tenha alguma dúvida não deixe de compartilhar.

Bons estudos e até mais!