Deu certo mas aparece um ponto preto.

Realizei a tarefa como foi pedida mas resolvi adicionar um outro quadrado, que ao ser clicado limparia o desenho. Entretanto quando eu limpo a tela, fica um ponto preto em algum lugar.

Segue o código.

<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');
    desenhaQuadrado(550,350,50,'black');

}

function lidaComMovimentoDoMouse(evento) {

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

    if(desenha) {

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

function habilitaDesenhar() {

    desenha = true;
}

function desabilitaDesenhar() {

    desenha = false;
}

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
pincel.strokeRect(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;

function mudaCor(evento){

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

    if (x>=0 && x<50 && y>=0 && y<50) {

        corAtual = 'red'
        desenhaPaletaDeCores();

    }else if (x>=50 && x<100 && y>=0 && y<50) {

        corAtual = 'green'
        desenhaPaletaDeCores();

    }else if (x>=100 && x<150 && y>=0 && y<50) {

        corAtual = 'blue'
        desenhaPaletaDeCores();

    }else if(x>=550 && x<600 && y>=350 && y<400) {

        limpaTela();
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
        pincel.strokeRect(0,0,600,400);
        desenhaPaletaDeCores();

    }
}

function limpaTela() {

    pincel.clearRect(0, 0, 600, 400);
}


desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

tela.onmousemove = lidaComMovimentoDoMouse;

tela.onmousedown = habilitaDesenhar;

tela.onmouseup = desabilitaDesenhar;

tela.onclick = mudaCor;


</script>