Diseñando con el mouse (Mi versión)

Espero les pueda servir mi código:

<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);

    //Crear los cuadrados de la paleta (puedes definir las dimensiones de los cuadrados como 50 x 50)
    //Crear la paleta de colores
    let colores=["purple","green","yellow","cyan","black"];
    let xCuadrado=0;
    let yCuadrado=0;
    let anchoCuadrado=50;
    let altoCuadrado=50;
    let cantidadCuarados=0;

    //funcione que permite dibujar la paleta de colores
    function dibujarCuadrados(){
            for(let i=0;i<colores.length;i++){
                pincel.fillStyle=colores[i];
                pincel.fillRect((xCuadrado+anchoCuadrado)*i,yCuadrado,anchoCuadrado,altoCuadrado);
                cantidadCuarados++;
            }            
    }

    //llamamos la función para que dibuje los colores de la paleta
    dibujarCuadrados();

    //inicializamos la variable que permite validar si se puede o no dibujar
    var puedoDibujar = false;

    //función que habilita el poder dibujar cambiando el valor de puedoDibujar a true
    //le inscrustamos el evento de onmoisemove para que solo con este se dibuje al arrastrar o mover el mouse
    function habilitarDibujar() {
        puedoDibujar = true;
        pantalla.onmousemove = dibujarCirculo;
    }

    //función que permite desabilitar el dibujo cambiando el valor de puedoDibujar a false
    //cambiamos el valor de onmouse a null para que se dehabilite el dibjo al mover el mouse
    function deshabilitarDibujar() {
        puedoDibujar = false;
        pantalla.onmousemove=null;
    }

    //inicializamos la variable colorSelecionado con el primer valor del arrar colore
    let colorSeleccionado=colores[0];

    //funcion que nos permite seleccionar el color de la paleta
    function seleccionarColor(evento){

        /* capturamos la posición del evento que realiza el curso
        y mejoramos la presición restandole el espacio de
        la parte superior y del lado izquiero mediante offsetLeft y offsetTop*/
        let xPaleta=evento.pageX - pantalla.offsetLeft;
        let yPaleta=evento.pageY - pantalla.offsetTop;

        //con el bucle for recorremos la cantidad de valores que tiene el arrar colores
        for(let i=0;i<colores.length;i++){

            //declaramos la variables que permitiran almacenar el área de los colores
            //luego le asignamos el valor calculado del ancho y alto del cuadrado
            //en el caso de areaColorX al i le sumanos 1 puesto que nuestro array inicia en 0
            let areaColorX=anchoCuadrado*(i+1);
            let areaColorY=altoCuadrado;

            //validamos con if si el evento realizado por el cursor se encuentra
            //en el área permitido para capturar el color
            if(xPaleta<=areaColorX && yPaleta<=areaColorY){
                //si cumple seleccionar mediante la posición en el que se cumplió la condición
                colorSeleccionado=colores[i];
                //luego mediante break salimos del bucle;
              break;
            }
        }

    }

    //funcion que permite dibujar el circulo mediante le evento en el área de anvas,
    //pero le restringimos poder graficarse en el área delas paletas
    function dibujarCirculo(evento) {

    //capturamos la posición del evento realizado por el currsor y
    //mejorarmos la precición restandole los borde sobrantes mediante offsetTop y offsetLeft
    let x = evento.pageX - pantalla.offsetLeft;
    let y = evento.pageY - pantalla.offsetTop;

    //declaramos la variables y le pasamos el cálculo del área restringido para el dibujo
    //tanto para el ancho y el alto, al calculo le estamos sumando 5 porque el tamaño del circulo
    //que simula el pincel tiene un tamaño de 5 y con esto no le permitimos pasarse al área restrindigo
    let restringidoX = (anchoCuadrado*cantidadCuarados)+5;
    let restringidoY = altoCuadrado+5;