Dúvida sobre value

Oi Amanda tudo bem?

A sua lógica parece estar certa. Poderia , por gentileza, colocar seu código aqui para analisarmos.

<style>
  body {
    background-image: url(http://starkovtattoo.spb.ru/images/200/DSC100215082.jpg);
  }
  .rotulo {
    display: block;
    padding: 20px;
    border-bottom-style: dotted;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 3px;
    border-color: #484770;
    border-top-style: double;
    max-width: 940px;
    background-color: #CBB9CA;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.425rem;
    color: #714F68;
    letter-spacing: 2px; 
    height: 50px;
    position: relative;
    z-index: 50;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }

  canvas {
    border-width: 3px;
    border-color: #484770;
    border-left-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
  }
  #minhacor {
    width: 50px;
    height: 50px;
    border: 3px dotted #484770;
    cursor: pointer;
  }

  p {
    color: antiquewhite;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-transform: uppercase;
  }
</style>

<center>
  <div class="rotulo">
    <label> Escolha uma cor para desenhar! :) </label><br />
    <br /><input type="color" id="minhacor" />
  </div>

  <canvas width="980" height="500"></canvas>
  <p>Por: Amandita ^^</p>
</center>

<script>
  var minhacor = document.getElementById("minhacor").value;

  var tela = document.querySelector("canvas");
  var pincel = tela.getContext("2d");
  var raio = 10;

  pincel.fillStyle = "#FFF9EB";
  pincel.fillRect(0, 0, 980, 500);

  var desenha = false;

  // atribuindo diretamente a função anônima
  tela.onmousemove = function(evento) {
    if (desenha) {
      if (evento.shiftKey && raio <= 40) {
        raio = raio + 10; 
      }
      if (evento.altKey && raio >= 10) {
        raio = raio - 5;
      }
      var x = evento.pageX - tela.offsetLeft;
      var y = evento.pageY - tela.offsetTop;
      pincel.fillStyle = minhacor;
      pincel.beginPath();
      pincel.arc(x, y, raio, 0, 2 * 3.14);
      pincel.fill();
    }
  };

  tela.onmousedown = function() {
    desenha = true;
  };

  tela.onmouseup = function() {
    desenha = false;
  };
</script>

No caso, ele começa a funcionar normalmente ao desenhar pela tela, mas quando tento alterar a cor ainda continua desenhando com o preto e não muda :/ Só da certo quando o value é posto diretamente na variavel minha cor no pincel.fillStyle.

Gostei muito da página!!!

Quando você programou

  var minhacor = document.getElementById("minhacor").value;

Você travou o valor que é uma string para a variável minhacor

altere para

  var minhacor = document.getElementById("minhacor");

para a variável minhacor ser igual ao input de cor

E depois lá embaixo em:

pincel.fillStyle = minhacor;

altere para pegar o valor

pincel.fillStyle = minhacor.value;

Assim antes o código ficava travado na string da cor, agora ele está travado no objeto input da cor.

Espero ter ajudado!!!

Que bom que gostou da página \o/

Era isso mesmo que estava a confundir meu cérebro, obrigada pela ajuda, professor! ^^

Disponha e bons estudos!!!