meu codigo e uma duvida

Olá, segue meu código do exercício. Fiquei com uma dúvida danada sobre como não rabiscar sobre a paleta de cores rsrs. Esta me pegou e não consegui resolver sozinho... acabei por implementar uma resolução do pessoal aqui do fórum. Porém minha dúvida é se há possibilidade de sobrepor a paleta de cores "na frente" do canvas assim desenharia por trás da paleta de cores no canvas... acreditei que também daria certo mas como não consegui fazer fica a dúvida. :)

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

</canvas>

<script>

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

    var desenha = false;
    var corAtual = "purple";
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;


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*Math.PI)
        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(x>=0 && x < 150 && y >=0 && y < 50){
            desenha=false
        }
        if (desenha){
            desenhaCirculo(x, y, 5, corAtual);
        }
    }

    function habilitaDesenhar(){
        desenha=true;
    }

    function desabilitaDesenhar(){
        desenha=false;
    }

function trocaCores(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop
        if(x>=0 && x < 50 && y >=0 && y < 50){
            alert("cor vermelha")
            corAtual = 'red'
        }
            if(x>=50 && x < 100 && y >=0 && y < 50){
            alert("cor verde")
            corAtual = 'green'
        }
        if(x>=100 && x < 150 && y >=0 && y < 50){
            alert("cor azul")
            corAtual = 'blue'
        }

        }


    trocaCores
    tela.onclick =trocaCores    



trocaCores

desenhaPaletadeCores();


    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onmousemove = lidaComMovimentoDoMouse;






</script>