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

Passar o mouse por cima desenha

Consegui juntar os códigos anteriores. Quando você passa o mouse por cima, sem precisar apertar algum botão, ele desenha o circulo. Também estão habilitadas as functions de mudar cor e de aumentar e diminuir tamanho:

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

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

        var cores = ['blue', 'red', 'green']
        var indiceCorAtual = 0; // começa com blue

        var desenha = false;
        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 && evento.altKey) {
                alert('Só aperte uma tecla por vez, por favor!');
            } 
            else if(evento.shiftKey && raio + 10 <= 40) {
                raio++;
            } 
            else if(evento.altKey && raio - 5 >= 10) {
                raio--;
            }

            pincel.fillStyle = cores[indiceCorAtual];
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14);
            pincel.fill();

            if(desenha) {
                var x = evento.pageX - tela.offsetLeft;
                var y = evento.pageY - tela.offsetTop;
                pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, 10, 0, 2 * 3.14);
                pincel.fill();
            }
            console.log(x + ',' + y);
        }

        tela.onclick = desenhaCirculo;

        function mudaCor() {
            indiceCorAtual++;

            if(indiceCorAtual >= cores.length) {
                indiceCorAtual = 0; // volta para a primeira cor, azul
            }

            return false; // para não exibir o menu padrão do canvas
        }

        tela.oncontextmenu = mudaCor;
        tela.onmousemove = desenhaCirculo;

        function habilitaDesenhar() {
            desenha = true;
        }

        function desabilitaDesenhar() {
            desenha = false;
        }

        tela.onmousedown = habilitaDesenhar;
        tela.onmouseup = desabilitaDesenhar;

    </script>
1 resposta
solução!

Bacana, Gustavo!

Qualquer dúvida nos procure

Um abraço e bons estudos

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