mi paint con colores expandibles

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

<script>

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

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400);

    var colores = ["blue","red","green","black"]; //lista editable pero hay q agregar un nuevo if en alternarcolor
    var color = 0;
    var cuadrado= 50; //tamaño de cuadrado
    var puedoDibujar = false;

    function dibujarCuadrado(X,Y,color,ancho,altura){ 
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;  
        pincel.fillRect(X,Y,ancho,altura); 
        pincel.strokeStyle = "white";
        pincel.strokeRect(X,Y,ancho,altura);       
    }

    function paletaColores(){
        for(valor = 0 ; valor < [colores.length] ; valor++){
            dibujarCuadrado (cuadrado*valor,0,colores[valor],cuadrado,cuadrado);
        }       
    }    

    function alterarColor(evento) {        
        console.log(evento);
        var x = event.pageX - pantalla.offsetLeft;
        var y = event.pageY - pantalla.offsetTop;

        if(x > cuadrado *0 && y < cuadrado && x < cuadrado *1){
            color = 0;
        }       
       if (x >= cuadrado *1 && y < cuadrado && x < cuadrado *2){
           color = 1;
       }       
       if (x >= cuadrado *2 && y < cuadrado && x < cuadrado *3){
           color = 2;
       }    
       if (x >= cuadrado *3 && y < cuadrado && x < cuadrado *4){
           color = 3;
       }   //buscar como optimizar       
    }

    function dibujarCirculo(evento) {
        if(puedoDibujar) {
            console.log(evento);            
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            pincel.fillStyle = colores[color];
            pincel.beginPath();
            pincel.arc (x,y,10,0,2*Math.PI) ;
            pincel.fill();
            console.log(x+" , "+y);            
        }
        paletaColores();  //dibuja todo el tiempo la paleta y parece que no se puede dibujar sobre ella.
    }

    function habilitarDibujar() {      
        puedoDibujar = true;         
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }
    paletaColores();
    pantalla.onmousemove = dibujarCirculo;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    pantalla.onclick = alterarColor;         

</script>