Diseñando con el mouse fk

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

    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 1000, 600);
    var puedoDibujar = false;
    var colores = ["white","black","purple","blue","green","yellow","red","grey"]
    var indice = 0
    var radio = 5
    var limitePx

    function dibujarCuadroColor(x,y,i){
        pincel.fillStyle = colores[i]
        pincel.fillRect(x,y,50,50)
        pincel.strokeStyle = "black"
        pincel.strokeRect(x,y,50,50)
    }
    function paleta(){
        var aux = 0;
        for(var i = 0;i<colores.length;i++){
            dibujarCuadroColor(aux,0,i)
            aux+=50
        }
    }
    function cambiarColor(evento) {
        var x = evento.pageX - pantalla.offsetLeft
        var y = evento.pageY - pantalla.offsetTop
        var aux = 0;
        for(var i = 0;i<colores.length;i++){
            if((x<aux+50)&&(x>aux)&&(y<50)&&(y>0)){
                indice = i
                break
            }
            if((x>colores.length*50-50)&&(x<colores.length*50)){
            }
            else{
                radio=5
            }
            aux+=50 
        }
    }
    function dibujarPincel(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if((x<(colores.length*50+16))&&(x>0)&&(y<50+16)&&(y>0)){
            deshabilitarDibujar
        }
        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;}

    paleta()
    pantalla.onclick = cambiarColor
    pantalla.onmousemove = dibujarPincel;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
</script>