Diseñando con el mouse: Pequeños cambios

¡Hola! Comparto mi solución, ya que tiene algunas diferencias con la solución dada. En mi caso, lo diseñé para poder agregar más colores si así se desee. No le puse un tope, y puede tener algunos errores, pero estoy satisfecha.

¡Gracias!

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

<script>

    //Variables iniciales
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    var puedoDibujar = false;
    var colores = ['red', 'green', 'blue', 'yellow', 'purple'];
    var colorElegido = 'blue';
    var posicionCuadradoActual = 0;
    var alturaCuadrado = 40;
    var baseCuadrado = 40;


    //PANTALLA
    //Limpia la pantalla  y vuelve a agregar el color de fondo y los cuadrados de color.
    function actualizarPantalla(){
        pincel.fillStyle = 'grey';
        pincel.fillRect(0, 0, 600, 400);
        dibujarCuadrados();
    }

    //Dibuja los cuadrados que sirven para seleccionar el color deseado
    function dibujarCuadrados(){
        posicionCuadradoActual = 0;
        for(var i=0; i<colores.length; i++){
            pincel.fillStyle = colores[i];
            pincel.fillRect(posicionCuadradoActual, 0, baseCuadrado, alturaCuadrado);
            posicionCuadradoActual+= baseCuadrado;
        }    
    }

    //DIBUJO
    //Captura el movimiento del mouse y verifica las condiciones para iniciar el dibujo 
    function capturarMovimientoValido(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if(puedeDibujar(x, y) && puedoDibujar){
            dibujarCirculo(x, y, colorElegido);
        }
    }

    //Dibuja
    function dibujarCirculo(x, y, colorElegido) {
        pincel.fillStyle = colorElegido;
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();
    } 

    //Elige el color en base a la posición del mouse en el canvas
    function elegirColor(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        for(var i = 0; i < colores.length; i++){
            if ((x > baseCuadrado * i) && (x < baseCuadrado * (i+1)) && (y > 0) && (y < alturaCuadrado)) {
                colorElegido = colores[i];
                }
        }
    }

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    //Verifica que esté dentro del ámbito permitido para dibujar
    function puedeDibujar(x, y) {
        if((x >= 0) && (x <= (colores.length * baseCuadrado)) && (y >= 0) && (y <= alturaCuadrado)){
            return false;
        } else {
            return true;
        }
    }


    pantalla.onmousemove = capturarMovimientoValido;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    pantalla.onclick = elegirColor;
    actualizarPantalla();

</script>