Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

acho que estou pegando o jeito !!!!

<canvas width="600" height="400"></canvas>
<meta charset="UTF-8">
<br>
escolha uma cor para a tela <input type="color">

<script>

    alert ('vamos desenhar !!!')
    alert ('abaixo da tela troque a cor do pincel')

    var corPincel = document.querySelector('input');
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');


    pincel.fillStyle = prompt("Qual cor (em inglês) da tela você prefere?");
    pincel.fillRect(0, 0, 600, 400);


    var desenha = false

    //var cor = prompt("Qual cor (em inglês) do pincel você prefere?");

    function desenhaCirculo(evento) {

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

        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    function pintar() {

        desenha = true
    }

    function naoPintar() {

        desenha = false
    }

        // Botão direito precionado
    tela.onmousedown = pintar
        // Botaõ direito não precionado
    tela.onmouseup = naoPintar

</script>

mas tem alguma forma de mudar a cor da tela sem ter que carregar a pagina ???

2 respostas
solução!

Oi Daniel, tudo bem ?

Para trocar a cor da tela sem ter que recarregar a página, ao invés de usar prompt você pode utilizar um input na página e pegar o valor digitado do mesmo.

Segue abaixo o código:

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

<div>
    Qual cor (em inglês) da tela você prefere? <input type="text" id="cor_da_tela"> <button id="trocar_cor_tela">Trocar cor</button>
</div>

<div>
    escolha uma cor para a tela <input type="color" id="cor_pincel"> 
</div>

<script>

    alert ('vamos desenhar !!!')
    alert ('abaixo da tela troque a cor do pincel e mude a cor da tela')

    var corPincel = document.getElementById('cor_pincel');
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');


    pincel.fillStyle = 'green'; //cor inicial
    pincel.fillRect(0, 0, 600, 400);


    var desenha = false

    function desenhaCirculo(evento) {

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

        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    function pintar() {

        desenha = true
    }

    function naoPintar() {

        desenha = false
    }

    var botao_mudar_cor = document.getElementById('trocar_cor_tela');
    botao_mudar_cor.onclick = function() {
        var cor_da_tela = document.getElementById('cor_da_tela').value;
        pincel.fillStyle = cor_da_tela;
        pincel.fillRect(0, 0, 600, 400);
    }


    // Botão direito precionado
    tela.onmousedown = pintar
    // Botaõ direito não precionado
    tela.onmouseup = naoPintar

</script>

Acredito que este seja o resultado que você espera. Observe que agora adicionamos um id ao nosso input para que cada um tenha uma identificação única e assim, consigamos trabalhar com cada um separadamente.

Qualquer dúvida estou a disposição. Espero ter ajudado. Bons estudos!!!

opa ajudou sim !!!!