Duvida sobre input.

Oii Fernando, tudo bem?

Primeiramente, meus parabéns por se dedicar e ir além do conteúdo do exercício. É exatamente quando nos desafiamos que conseguimos consolidar os conhecimentos e evoluir!

Vamos a alguns passos para que você consiga capturar a cor da tela:

A primeira coisa que você precisa fazer é adicionar o atributo class aos seus inputs da seguinte forma:

Escolha uma cor para o pincel: <input class="classPincel" type="color">

<br><br> 

Escolha uma cor para a tela: <input class="classTela" type="color">

Isso vai te permitir atribuir os valores de corTela e corPincel individualmente, como no código a seguir:

   var corTela = document.querySelector('.classTela');
   var corPincel = document.querySelector('.classPincel');

Em seguida, na função mudaCorTela, o pincel.fillStyle deve receber corTela.value, ficando assim:

    function mudaCorTela(cor){
        pincel.fillStyle = corTela.value;
        pincel.fillRect(0, 0, 600, 400);

        return false;
    }

Por fim, na função desenhaCirculo, o pincel.fillStyle deve receber corPincel.value, ficando assim:

    function desenhaCirculo(evento,cor) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if(desenha){
        pincel.fillStyle = corPincel.value;
        pincel.beginPath();
        pincel.arc(x, y, 10 , 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y );
        }
    }

E prontinho! Você já consegue capturar a cor da tela sem problemas. O código final completo será o seguinte:

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

<br>

Escolha uma cor para o pincel: <input class="classPincel" type="color">

<br><br> 

Escolha uma cor para a tela: <input class="classTela" type="color">

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var desenha = false
    var corTela = document.querySelector('.classTela');
    var corPincel = document.querySelector('.classPincel');

    function mudaCorTela(cor){
        pincel.fillStyle = corTela.value;
        pincel.fillRect(0, 0, 600, 400);

        return false;
    }

    function desenhaCirculo(evento,cor) {

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

        if(desenha){

        pincel.fillStyle = corPincel.value;
        pincel.beginPath();
        pincel.arc(x, y, 10 , 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y );

        }

    }

    function comecaPintar(evento){

       desenha = true

    }

    function paraPintura(evento){ 

        desenha = false

    } 

    tela.oncontextmenu = mudaCorTela;

    tela.onmousemove = desenhaCirculo;

    tela.onmousedown = comecaPintar;

    tela.onmouseup = paraPintura;



</script>

Espero ter resolvido sua questão. Caso ainda tenha alguma dúvida, me coloco à disposição!

Grande abraço e bons estudos!