Aula 5 Atividade 5. Desenhe arte.

Olá pessoal,

Sangrei, mas consegui....

Fiz um pouco diferente do Flávio, mas com resultado igual, pelo menos nos meus testes no Safari.

Teve uma coisa que observei, pois o brush ainda invadia um pouco a paleta de cores. Acredito que X e Y do método .arc seja centralizado, talvez por esse motivo, mesmo determinando as coordenadas XY certinho da paleta, ele ainda pintava meia bolinha nas bordas. fiz uma compensação do raio na lógica de colisão para não invadir a paleta. É isso mesmo?

<meta charset="UTF-8">

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

<script>


    function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaPaletaDeCores() {

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

    }

    function lidaComMovimentoDoMouse(evento) {

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

        var raio = 5;

        if ((x > xVermelho - raio) // Lógica de colisão pedida pelo Flávio
         && (x < xVerde + xAzul + raio) 
         && (y > yQuadrados - raio) 
         && (y < tamanhoQuadrados + raio)) {

        } else {if(desenha) {

            desenhaCirculo(x, y, raio, corAtual);
         }
        }
    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    function selecionaPaletaCor(evento) { // função e lógica para escolher ao clicar, uma de 3 cores pedida pelo Flávio.

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

        if ((x > xVermelho) 
         && (x < tamanhoQuadrados) 
         && (y > yQuadrados) 
         && (y < tamanhoQuadrados)) {

         corAtual = 'red';

         }

        if ((x > xVerde) 
         && (x < xAzul) 
         && (y > yQuadrados) 
         && (y < tamanhoQuadrados)) {

         corAtual = 'green';

         }

        if ((x > xAzul) 
         && (x < xAzul + tamanhoQuadrados) 
         && (y > yQuadrados) 
         && (y < tamanhoQuadrados)) {

         corAtual = 'blue';

         }

    } 

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;
    var corAtual = 'blue';
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onclick = selecionaPaletaCor;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;


</script>

Obrigado, aprendo muito aqui no fórum.