[Duda] crear la paleta de colores para dibujar en el canvas

En la parte de cambiar color mediante un click a la paleta queria hacerlo utilizando un while pero no se como hacerlo, ya lo intente de varias maneras y no me sale.... Para que mi paleta funcionara lo tuve que condicionar de uno a uno...

Alguien podria ayudarme a hacer esta funcion de cambiar el color mediante while o for ¡No quiero quedarme con la duda!

<meta charset="utf-8">

<div>
    <canvas width="1000" height="600"></canvas>
</div>

<script>

    var pantalla =  document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "#ccffff";
    pincel.fillRect(0,0,1000,600);
    pincel.strokeStyle = "black";
    pincel.strokeRect(0,0,1000,600); /*Tener cuidado a donde colocamos los estilos del canvas.. puede afectar en el codigo*/

    var puedoDibujar = false;

    //Datos Circulo
    var radio = 5;

    //Variable para dibujar paleta
    var xPaleta = 10;
    var yPaleta = 5;
    var alturaPaleta = 40;
    var basePaleta = 40;

    var colores = ["red","green","blue","orange","purple","yellow","pink","white","grey","black"];

    var colorActual = 0;

    function dibujarCirculo(x,y) { //dibujarCirculo(evento) cambiamos a x,y

        if(puedoDibujar) {

            /* Quitamos esta funcion y creamos otra llamada capturaMovimientoDelMouse con los datos de x y y
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            */

            pincel.fillStyle = colores[colorActual];
            pincel.beginPath();
            pincel.arc(x,y,radio,0,2*Math.PI);
            pincel.fill();
        }
    }

    pantalla.onmousemove = dibujarCirculo;

    function Paleta(x,y,base,altura,color) {

        pincel.fillStyle = color;
        pincel.fillRect(x,y,base,altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,base,altura);

    }

    function crearPaleta(colores) {

        var listaCordenadasX = [];
        var xPaletaPosicion = xPaleta;

        for (var posicion = 0; posicion < colores.length; posicion++){

            Paleta(xPaletaPosicion,yPaleta,basePaleta,alturaPaleta,colores[posicion]); //Paleta(xPaleta,yPaleta,basePaleta,alturaPaleta,colores[posicion]);

            xPaletaPosicion = xPaletaPosicion + basePaleta; //xPaleta = xPaleta + basePaleta;

            listaCordenadasX.push(xPaletaPosicion);

        }
        /*console.log(listaCordenadasX.length-1);
        console.log(listaCordenadasX[listaCordenadasX.length-1]);
        console.log(listaCordenadasX);*/

        return listaCordenadasX;
    }

    var listaCoordenadasX = crearPaleta(colores);
    console.log (listaCoordenadasX);
    console.log(listaCoordenadasX.length - 1);

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    //función para limitar el área

    function puedoDisenarArea(xCoordenada,yCoordenada) {

        if (
            (xCoordenada >= 0 && xCoordenada < ((colores.length*basePaleta) + (radio * 3))) && 
            (yCoordenada >=0 && yCoordenada < (alturaPaleta + (radio * 2)))

            ) {

            return false;

        } else{

            return true;

        }
    }

    function capturarMovimientoDelMouse(evento){

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

            if(puedoDisenarArea(x,y)){

                dibujarCirculo(x,y);
            }

    }

    function seleccionarColor(evento){

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

        console.log(x,y);

      //Cada condición altera el color de la variable colorActual

        if (y > yPaleta && y < (yPaleta + alturaPaleta)) {

            console.log(xPaleta);
            console.log(yPaleta);

            if(x > xPaleta && x < listaCoordenadasX[0]){
                colorActual = 0;
            }

            if(x > listaCoordenadasX[0] && x < listaCoordenadasX[1]){
                colorActual = 1;
            }
            if(x > listaCoordenadasX[1] && x < listaCoordenadasX[2]){
                colorActual = 2;
            }
            if(x > listaCoordenadasX[2] && x < listaCoordenadasX[3]){
                colorActual = 3;
            }
            if(x > listaCoordenadasX[3] && x < listaCoordenadasX[4]){
                colorActual = 4;
            }
            if(x > listaCoordenadasX[4] && x < listaCoordenadasX[5]){
                colorActual = 5;
            }
            if(x > listaCoordenadasX[5] && x < listaCoordenadasX[6]){
                colorActual = 6;
            }
            if(x > listaCoordenadasX[6] && x < listaCoordenadasX[7]){
                colorActual = 7;
            }
            if(x > listaCoordenadasX[7] && x < listaCoordenadasX[8]){
                colorActual = 8;
            }
            if(x > listaCoordenadasX[8] && x < listaCoordenadasX[9]){
                colorActual = 9;
            }

        }
    }

    pantalla.onclick = seleccionarColor;

    pantalla.onmousemove = capturarMovimientoDelMouse;

    pantalla.onmousedown = habilitarDibujar; 

    pantalla.onmouseup = deshabilitarDibujar; 

</script>