Melhoria com um botão para apagar

Fiz algumas mudanças no código para a caixa de cor ficar com borda e adicionei um botão para apagar a tela. O código está funcionando, mas quando eu clico no botão apagar, fica um circulo branco no ponto do último clique.

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();
        pincel.fillStroke ='black';
        pincel.strokeRect (x,y,tamanho,tamanho);
    }

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

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

    }

    function desenhaPaletaDeCores() {

        //fundo
        pincel.fillStyle = 'lightgray';  
        pincel.fillRect(0, 0, 600, 400);

        //quadrados
        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');        
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');
        desenhaQuadrado(xApagar, yQuadrados, tamanhoQuadrados, 'white');

        //texto
        pincel.font = '14px font';
        pincel.fillStyle = 'black';
        pincel.fillText("Red",xVermelho + 10, 25);
        pincel.fillText("Green",xVerde + 7, 25);
        pincel.fillText("Blue",xAzul + 10, 25);
        pincel.fillText("Apagar",xApagar + 5, 25);

    }

    function lidaComMovimentoDoMouse(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if(desenha) {           
            if(x > 200 || y > 50){
                desenhaCirculo(x, y, 5, corAtual);
                console.log(x,y);
            }
        }
    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

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

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

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

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

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

            //apagar
            if(x > xApagar && x <= (xApagar + tamanhoQuadrados)){
                pincel.clearRect(0,0,600,400);
                desenhaPaletaDeCores();
            }
        }
    }

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


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

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

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onclick = corUtilizada;

</script>

Obrigado! Abraços