3
respostas

Não é dúvida. O usuário pode escolher a cor

Gente! Fiquei muito feliz com o que fiz. Sei que não é nada excepcional, mas consegui colocar o código para o usuário escolher a cor com a qual quer pintar. Quando a pessoa clica com o botão direito, ela pode escolher a cor Segue o código:

<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 = prompt('Escolha uma cor (em inglês)');
    if(cores !== "color"){
        alert('Esta não é uma cor válida');
        cores = prompt('Escolha uma cor (em inglês)');
    }
    var desenha = false     

    tela.onmousemove = function(evento) {

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

    }
    tela.onmousedown = function() {

            desenha = true        
    }
    tela.onmouseup = function() {

            desenha = false
    }
    tela.oncontextmenu = function(){
        cores = prompt('Escolha uma nova cor (em inglês)');
        return false;
    }

</script>
<br>
Com um clique do botão esquerdo de seu você pode escolher uma nova cor
3 respostas

Muito boa sua ideia Lucas!!! Show de bola!!!

Que criativo, testei aqui e ficou muuuito legal! Parabéns, Lucas!

Fala Lucas! eu sugiro essa outra organização para solucionar um detalhe da primeira escolha

<meta charset="UFT-8">
<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 desenha = false     

    tela.onmousemove = function(evento) {

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

    }
    tela.onmousedown = function() {

            desenha = true        
    }
    tela.onmouseup = function() {

            desenha = false
    }
    tela.oncontextmenu = function(){
        cores = prompt('Escolha uma nova cor (em inglês)');
        return false;
    }

</script>
<br>
<h1>Com um clique do botão direito você troca de cor</h1>