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

Um clique só + clicar e arrastar (compartilhando o código)

Olá colegas. Passe metade da tarde tentando juntar os dois exercícios no mesmo código e consegui com duas funções do desenhaCirculo: a primeira é ativada pela variável "desenha" verdadeiro, o que não funciona para um clique só. Então fiz uma função sem a condição verdadeiro e falso só para o tela.onclick. Fica assim o código, um pouco grande:

<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 cores = ["blue", "red", "yellow"];
    var indiceCores = 0;
    var tamanho = 10;

    var desenha = false;

        function desenhaCirculo(evento) {

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


            if(evento.shiftKey && tamanho <= 40) {
                tamanho = tamanho + 10;
            } else if(evento.altKey && tamanho >= 10) {
                tamanho = tamanho - 5;        
            }
            }
        }

                function desenhaCirculo2(evento) {
                var x = evento.pageX - tela.offsetLeft;
                var y = evento.pageY - tela.offsetTop;
                pincel.fillStyle = cores[indiceCores];
                pincel.beginPath();
                pincel.arc(x, y, tamanho, 0, 2 * 3.14);
                pincel.fill();
                console.log(x + ' , ' + y);


                    if(evento.shiftKey && tamanho <= 40) {
                        tamanho = tamanho + 10;
                    } else if(evento.altKey && tamanho >= 10) {
                        tamanho = tamanho - 5;        
                    }
                    }

                function mudaCor() {
                        indiceCores++;

                            if(indiceCores >= cores.length) {
                                    indiceCores = 0;
                            }

                return false;
                }    

        function habilitaDesenhar() {

            desenha = true;
        }

        function desabilitaDesenhar() {

            desenha = false;
        }

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onclick = desenhaCirculo2;

    tela.oncontextmenu = mudaCor;

    tela.onmousemove = desenhaCirculo;

</script>

Apanhei, apanhei, mas no fim deu certo. =D

1 resposta
solução!

Fala, Alisson! Tudo bem contigo?

Muito bacana, meu amigo!

Pratique sempre e qualquer dúvida nos procure

Um abraço e bons estudos