Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Fazendo de outra maneira.

<body>

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

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

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

        var cores = ['blue', 'red', 'green', 'yellow', 'black'];
        var indiceCorAtual = 0; //Iniciará com 'blue'

        function desenhaBolinhasColoridas(evento) {

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


                if(indiceCorAtual < cores.length) {

                    pincel.fillStyle = cores[indiceCorAtual];
                    pincel.beginPath();
                    pincel.arc(x, y, 15, 0, 2 * 3.14 );
                    pincel.fill();
                    console.log(x + ',' + y);

                    indiceCorAtual++  

                } 

                if(indiceCorAtual >= cores.length) {

                    indiceCorAtual = 0;

                }

        }   

        tela.onclick = desenhaBolinhasColoridas;

    </script>

</body>

Em vez de clicar com o botão direito do mouse para mudar a cor e so em seguida clicar com o esquerdo para fazer a bolinha. Criei uma única função que irá executar da seguinte forma.

Ao clicar com o botão esquerdo do mouse irá criar uma bolinha com a primeira cor, logo em seguida a próxima e assim sucessivamente. Após a última cor o programa irá retornar novamente para primeiro cor.

Obs.: Eu não utilizei o else por causa que após ir para primeira cor novamente, ao clicar, o programa executava somente para zerar o 'indiceCorAtual' e só no próximo clique que retornaria a primeira cor. Caso você queira testar utilize o 'else'.

1 resposta
solução!

Olá, João Pedro! Tudo bem?

Muito bom, sua versão ficou excelente, parabéns!

Qualquer dúvida estamos à disposição.

Continue praticando e bons estudos!

Até mais! =)

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