Programa de dibujo

Programa de dibujo, definiendo la zona del canvas dentro de un cuadro con una paleta de colores dejando la posibilidad de agregar muchos mas, utilizando el mismo color blanco como borrador aumentando de tamaño para borrar de manera mas facil

<meta charset="utf-8">

<h2>PROGRAMA DE DIBUJO</h2>

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

    //Creamos nuestro lienzo definiendo variables y el area de dibujo, asi como los colores que podemos ir agregando
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 1000, 600);
    pincel.strokeStyle = "black"
    pincel.strokeRect(0,0,1000,600)
    var puedoDibujar = false;
    var colores = ["black","purple","blue","green","yellow","red","white"] 

    var indice = 0
    var radio = 5
    var limitePx

    function dibujarCuadroColor(x,y,i){ 
    // Creamos el cuadro para el color
        pincel.fillStyle = colores[i]
        pincel.fillRect(x,y,25,25)
        pincel.strokeStyle = "black"
        pincel.strokeRect(x,y,25,25)
    }

    function paleta(){            
    //Creamos la paleta de colores definido por un ARRAY
        var aux = 0;
        for(var i = 0;i<colores.length;i++){
            dibujarCuadroColor(aux,0,i)
            aux+=25
        }
    }
    function cambiarColor(evento) {

        // obtendra las coordenadas en el eje X dentro de la pizarra
        // obtendra las coordenadas en el eje Y dentro de la pizarra
        var x = evento.pageX - pantalla.offsetLeft  
        var y = evento.pageY - pantalla.offsetTop


        // Este auxiliar nos ayudara para avanzar 50px y asi estar sobre el siguiente color
        var aux = 0;                                
        for(var i = 0;i<colores.length;i++){        
            //Dependiendo las coordenadas, eligira el color, cada 50px pasa al color siguiente
            if((x<aux+25)&&(x>aux)&&(y<25)&&(y>0)){ 
                indice = i
                break
            }
            //Si esta en la posicion del color blanco(borrador), el radio del pincel aumentara para borrar mas facil
            if((x>colores.length*25-25)&&(x<colores.length*25)){

                radio=20
            }
            //Si no es el color blanco el radio del pincel sera normal
            else{       
                radio=5
            }
            aux+=25 
        }
    }

    // Deshabilita el pincel encima de la paleta de colores
    function dibujarPincel(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if((x<(colores.length*25+16))&&(x>0)&&(y<25+16)&&(y>0)){  
            deshabilitarDibujar
        }
        //Habilita el pincel en el resto del pizarron
        else if(puedoDibujar) {                     
            pincel.fillStyle = colores[indice];
            pincel.beginPath();
            pincel.arc(x, y, radio, 0, 2 * 3.14);
            pincel.fill();
        }
    }
    function habilitarDibujar() {puedoDibujar = true;}
    function deshabilitarDibujar() {puedoDibujar = false;}

    //Hacemos el llamado a las funciones
    paleta()    
    //Crea la paleta de colores
    pantalla.onclick = cambiarColor   
    //El evento asociado al cambio de color
    pantalla.onmousemove = dibujarPincel; 
    //El evento asociado al movimiento del pincel
    pantalla.onmousedown = habilitarDibujar;
    //El evento asociado para habilitar el pincel
    pantalla.onmouseup = deshabilitarDibujar; 
    //El evento asociado para deshabilitar el pincel
</script>