Diseñando con el mouse - Propuesta de diseño

Buenas noches Equipo,

Esta es mi propuesta de solución para el board. Incluí un par de lineas más para hacer que con un solo click también pintara y no solo si se movía el mouse. Saludos. :)

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

  var colores = ["red","green","blue"]; //arreglo de los colores de la paleta
  var conteo = 2; //Variable para declarar que el color por default es aquel en la posición 2 del arreglo colores.

 var puedoDibujar = false; //variable para indicar si estas o no haciendo click y asp dibujar el circulo.

//funcion para dibujar la paleta, será llamada cada 1 ms por un setInterval para que lo que sea que se dibuje en esas coordenas sea cubierto por la paleta.
  function dibujarPaleta(){
      var inicio = [0,50,100]; //arreglo para indicar los inicios en x de cada paleta

//funcion que recibe valor de posicion que nos indicará el color y el inicio en cada arreglo
      function dibujarColor (color,inicios){
          pincel.fillStyle = colores [color]; //Indicamos el color del pincel con color 
          pincel.fillRect(inicio[inicios],0,50,50); //dibujamos un cuadrado con inicio en inicios
        }

      //funcion para hacer el recorrido de posicion 0 a 2 y dibujar llas paletas.
      for (var x = 0; x < 3; x++){
          dibujarColor(x,x); //llamando la funcion que acabamos de hacer.
      }
   }

  function dibujarCirculo(evento) { 
    if(puedoDibujar) { 
      var x = evento.pageX - pantalla.offsetLeft; 
      var y = evento.pageY - pantalla.offsetTop; 
      pincel.fillStyle = colores[conteo];  //El pincel se colorea con el valor conteo en el arreglo de colores
      pincel.beginPath(); 
      pincel.arc(x, y, 5, 0, 2 * 3.14); 
      pincel.fill(); 
                  } 
                } 
//funcion para preguntar si se está haciendo click en alguna de las paleta y devuelve un valor de conteo dependiendo la paleta en la que se haga 

   function seleccionColor(equis,ye){
     if(ye<50){
          if(equis<50){
              return(conteo = 0);           
              }
          if(equis<100){
              return(conteo = 1);           
              }
          if(equis<150){
              return(conteo = 2);           
              }
         }
} 

//funcion original pero con un cambio para que tambien dibuje un punto incluso aunque no se mueva el mouse, es decir, solo con un click.
   function habilitarDibujar(evento) { 
      puedoDibujar = true;
      var x = evento.pageX - pantalla.offsetLeft; 
      var y = evento.pageY - pantalla.offsetTop; 
      seleccionColor(x,y); //llamada a funcion color y dandole los valores de x & y de nuestro click; 
      pincel.fillStyle = colores[conteo]; //el pincel cambia de color si es que se selecciona una paleta.
//funcion para pintar un circulo incluso cuando no se mueva el mouse.
      pincel.beginPath(); 
      pincel.arc(x, y, 5, 0, 2 * 3.14); 
      pincel.fill();
        } 

    function deshabilitarDibujar() { 
      puedoDibujar = false; 
        } 

//llamadas a las funciones originales con las acciones al mouse.
    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onmousemove = dibujarCirculo;

    //Llamada a la funcion dibujarPaleta cada 1 ms para que cualquier cosa que se dibuje encima de ellas desaparezca
    setInterval(dibujarPaleta,1);

</script>