Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Eu tentei alterar as cores mas não consegui então eu so deixei essas 2

insira seu<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;
        var cor = 'blue';

        if (evento.shiftKey) {
            cor = 'gold';
            raio = raio + 10;

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

    }

    tela.onclick = desenhaCirculo;

</script> código aqui
2 respostas
solução!

Fala, Daniel! Tudo bem? Espero que sim!!!

Pois vamos alterar(rs)...

Dê uma olhada nas cores que alterei no seu código:

<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;
        var cor = 'green';

        if (evento.shiftKey) {
            cor = 'purple';
            raio = raio + 10;

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

    }

    tela.onclick = desenhaCirculo;

</script>

E não contente, podemos alterar a cor de fundo:

pincel.fillStyle = 'yellow';

Teste outras cores de sua preferência também!!!

Espero ter ajudado, Daniel!!!

Bons estudos e vamos em frente!

hehehe beleza obrigado pelo feedback nos proximos exercicios eu altero mais as cores ^^