desenheobrasdearte.html:10 Uncaught TypeError: pincel.fillRect is not a function

manda o codigo para dar uma olhada! assim eu realmente também não consegui entender.

<meta charset="UTF-8">

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

<script>

    function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaPaletaDeCores() {

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

    }

    function lidaComMovimentoDoMouse(evento) {

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

        if(desenha && podeDesenharNaArea(x,y)) {

            desenhaCirculo(x, y, 5, corAtual);
        }

    }

    function habilitaDesenhar() {

        desenha = true;

    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    function podeDesenharNaArea(x, y) {

        if(x >=0 && x < 3 * tamanhoQuadrados && y >= 0 && y < tamanhoQuadrados) {
            return false;
        } else {
            return true;
        }
    }

    function selecionaCor(evento) {

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


        if( y > yQuadrados && y < yQuadrados + tamanhoQuadrados) {

            if ( x > xVermelho    &&  x < xVermelho +    tamanhoQuadrados) {
                corAtual ='red';

            } else if ( x > xVerde    &&  x < xVerde + tamanhoQuadrados) {
                corAtual ='green';

            } else if ( x > xAzul    &&  x < xazul + tamanhoQuadrados) {
                corAtual ='blue';
            }

        }        

    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect = (0, 0, 600, 400);

    var desenha = false;
    var corAtual = 'blue';
    var xVermelho = 0;
    var xVerde = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores();

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmousedown = desabilitaDesenhar;

    tela.onclick = selecionaCor;

</script>

Fala, Eduardo! Tudo bem contigo?

Desculpe a demora em dar um retorno!

O que acontece é que seu código está chamando o pincel.fillStyle e o pincel.fillRect também fora da função na linha 85 até 88

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect = (0, 0, 600, 400);

Logo, ao rodar o código ele mostra esse dizendo que eles não são uma função.

Basta excluí-los para que as paletas possam aparecer no seu canvas

Espero ter ajudado, Eduardo!

Nos dê um retorno para sabermos se deu tudo certo!!

Um abraço!!!

Oi Cássio Murilo, Bom dia! Fiz as correções e funcionou perfeitamente. O que fiz foi copiar do "gabarito" da Alura, favor verificar a correção do gabarito. Obrigado