Dibujar con paleta de colores...

Les comparto mi código

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var puedoDibujar = false;
    var colorElegido = "blue";

    function dibujarCirculo(evento) {
        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            if (!restringirAreaPaleta(x,y)) {
               pincel.fillStyle = colorElegido;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill(); 
            }
        }
    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (!restringirAreaPaleta(x,y)) {
            puedoDibujar = true;
        }
    }

    function deshabilitarDibujar() {
       puedoDibujar = false;
    }


    var paletaColores = ["red", "green", "blue"];
    var ubicacionInicioPaletaX = 0;
    var ubicacionInicioPaletaY = 0;
    var anchoColorPaleta = 50;
    var altoColorPaleta = 50;

    function restringirAreaPaleta(x,y) {
        return ((x > ubicacionInicioPaletaX) && (x < anchoColorPaleta * (paletaColores.length)) && (y > ubicacionInicioPaletaY) && (y < altoColorPaleta));
     } 

    function dibujarCuadrados(colores) {
        var ubicacionCuadrado = ubicacionInicioPaletaX;
        for (var index = 0; index < colores.length; index ++) {
            pincel.fillStyle = colores[index];
            pincel.fillRect(ubicacionCuadrado,0,anchoColorPaleta,altoColorPaleta);
            ubicacionCuadrado = ubicacionCuadrado + anchoColorPaleta;
        }
    }

    function seleccionarColor(evento) {
        var ubicacionCuadrado = 0;
       for (var index = 0; index < paletaColores.length; index ++) {
            var clickX = evento.pageX - pantalla.offsetLeft;
            var clickY = evento.pageY - pantalla.offsetTop;

           if ((clickX > ubicacionCuadrado) && (clickX < ubicacionCuadrado + anchoColorPaleta) && (clickY > ubicacionInicioPaletaY) && (clickY < altoColorPaleta)) {
            colorElegido = paletaColores[index];
            break;
           }
           ubicacionCuadrado = ubicacionCuadrado + anchoColorPaleta;
       }
    }

    dibujarCuadrados(paletaColores);
    pantalla.onclick = seleccionarColor;

    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;

</script>