Mi solución de "Diseñando con el mouse"

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

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

    //crea array de colores e inicia en azul
    var valorDelArrayColores = 2;
    var colores = ["red","green","blue"];

    var puedoDibujar = false;

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

        //evita que dibujes en la paleta de colores
        if ((x < 155) && (x > -155) && (y < 55) && (y > -55)) {
            puedoDibujar = false
        }

        if (puedoDibujar) {

            pincel.fillStyle = colores[valorDelArrayColores];
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    //funcion generica para dibujar cuadrados con recuadro
    function dibujarCuadrado(x,y,tamaño,color){
        pincel.strokeStyle = "black";

        pincel.fillStyle = color;
        pincel.fillRect(x,y,tamaño,tamaño)
        pincel.strokeRect(x,y,tamaño,tamaño);
    }

    //agrega la funcion de cambiar color a la paleta
    function cambiarColor(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        //si clickeas dentro de estos valores cambia el color 
        if ((x < 50) && (x > -50) && (y < 50) && (y > -50)) {
            console.log(x,y)
            valorDelArrayColores = 0;

        } else if ((x < 100) && (x > -100) && (y < 50) && (y > -50)) {
            console.log(x,y)
            valorDelArrayColores = 1;

        } else if ((x < 150) && (x > -150) && (y < 50) && (y > -50)) {
            console.log(x,y)
            valorDelArrayColores = 2;
        }
    }

    function habilitarDibujar() {

        puedoDibujar = true;

    }

    function deshabilitarDibujar() {

        puedoDibujar = false;

    }

    //usa la funcion generica para generar la paleta
    dibujarCuadrado(0,0,50,"red");
    dibujarCuadrado(50,0,50,"green");
    dibujarCuadrado(100,0,50,"blue");

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onclick = cambiarColor;

    pantalla.onmousemove = dibujarCirculo;

    pantalla.onmouseup = deshabilitarDibujar;

</script>