1
resposta

Ao usar o botão direito a última bolinha já exibida muda de cor.

Olá. Indo um pouco além, criei uma function com um swith para identificar a cor selecionada. Também coloquei um retângulo no angulo superior direito para exibir qual a cor selecionada no momento. Criei uma função que executa ao clicarmos com o botão direito e altera a cor deste retângulo. Porém ao usa-la, a cor do último círculo já desenhado, é alterado também. Criei até uma variável PINCEL2 para tentar limitar os atributos, mas não identifiquei de forma alguma o problema. Eu quero que só o retângulo e os círculos que serão desenhados tenham a cor impactada, não as círculos que já desenhei...

<canvas width="800" height="600"></canvas>
<meta charset="UTF-8">

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext ('2d');
    var pincel2 = tela.getContext ('2d');
    var numeroCor = 1;

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

    pincel.font = "20px Georgia";
    pincel.fillStyle = 'black';
    pincel.fillText("Cor Selecionada:", 590,32);

    pincel2.fillStyle = identificaCor(numeroCor);
    pincel2.fillRect(740,10,50,30);
    pincel2.fill();
    pincel2.fillStroke = "black";
    pincel2.strokeRect = (740,10,50,30);

    function identificaCor (numeroCor){
        switch (numeroCor) {
            case 0:
                cor = 'yellow';
                break;            
            case 1:
                cor = 'lightblue';
                break;            
            case 2:
                cor = 'red';
                break;            
            case 3:
                cor = 'green';
                break;            
            case 4:
                cor = 'yellow';
                break;            
            case 5:
                cor = 'blue';
                break;            
            case 6:
                cor = 'lightred';
                break;            
            case 7:
                cor = 'green';
                break;            
            case 8:
                cor = 'lightyelow';
                break;            
            case 9:
                cor = 'blue';
                break;
            case 10:
                cor = 'lightgreen';
                break;
        }
        return cor;
    }



    function desenhaCirculo (evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = identificaCor(numeroCor);
        pincel.beginPath();
        pincel.arc (x,y,10, 0, 2 * 3.14);
        pincel.fill();
    }



function exibeCor() {

pincel2.fillStyle = identificaCor(numeroCor);
pincel2.fillRect(740,10,50,30);
pincel2.fill();
pincel2.fillStroke = "black";
pincel2.strokeRect = (740,10,50,30);

}


    function mudaCor () {
        if (numeroCor == 10){
            numeroCor = 1;
        }
        else {
            numeroCor++;
        }
       exibeCor();
    }

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;


</script>
1 resposta

O Clique com o botão direito do mouse está disparando os dois eventos ao mesmo tempo:

 tela.onclick = desenhaCirculo;
tela.oncontextmenu = mudaCor;

Por isto, o último círculo está sofrendo a alteração de cor também.

Experimente usar o duplo clique para mudar de cor, e o clique para desenhar o círculo.

    tela.ondblclick = mudaCor;
    tela.onclick = desenhaCirculo;