Mi propia versión

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    // al agregar otro color al array colores, este es completamente funcional en el browser
    var colores = ["red", "green" , "blue","yellow","pink","orange"]
    var base = 50
    var altura = 50

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

    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorSelect;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
            bloquearPaletaColores()

        }

    }

    pantalla.onmousemove = dibujarCirculo;  
    //onmousemove ---> permite capturar el movimiento del mouse
    function habilitarDibujar() {

        puedoDibujar = true;

    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;
    // onmousedown  ---> ejecutar un código cuando el mouse está presionado
    pantalla.onmouseup = deshabilitarDibujar;
    // onmouseup  ---> cuando el botón del mouse es soltado



    function paletaColores (x,y,colores,base,altura){
        pincel.fillStyle = colores
        pincel.fillRect(x,y,base,altura)
        pincel.strokeStyle = "black"
        pincel.strokeRect(x,y,base,altura)
    }

    var xDesplaso = 0
    var color
    var colorSelect
    while (xDesplaso < colores.length){
        paletaColores(xDesplaso*50,0,colores[xDesplaso],base,altura)
        color = colores[xDesplaso]
        xDesplaso++

        }
         if (xDesplaso == colores.length) {
            xDesplaso = 0
            colorSelect = "blue"
    }

    function captarColor(evento){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        for (var i = 0; i < colores.length; i++) {


            if ((x < i*50 + base) && 
                (x > i*50) &&
                (y < i + altura) &&
                (y > i) ) {
                paletaColores(i*50,0,colores[i],base,altura)
                alert("color " + colores[i] + " seleccionado");
                colorSelect = colores[i]
         } 
        }


    }

    function bloquearPaletaColores(){
        var xDesplaso = 0
        var color
        var colorSelect
            while (xDesplaso < colores.length){
                 paletaColores(xDesplaso*50,0,colores[xDesplaso],base,altura)
                 color = colores[xDesplaso]
                xDesplaso++

        }
         if (xDesplaso == colores.length) {
            xDesplaso = 0
    }

    }

    pantalla.onclick = captarColor;

</script>