Paleta de Dibujo con Identificador de Color

Paleta de Dibujo con Identificador de Color

<meta charset="utf-8" />

<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 puedoDibujar = false;
  var colores = ["blue", "red", "green"];
  var radio = 5;
  var colorActual = 0;

  function dibujarBarra(x, y, ancho) {
    pincel.strokeStyle = "black";
    pincel.beginPath();
    pincel.moveTo(x, y - 1);
    pincel.lineTo(x + ancho, y - 1);
    pincel.stroke();
  }

  function dibujarRecuadro(x, y, ancho, color) {
    pincel.fillStyle = colores[color];
    pincel.fillRect(x, y, ancho, ancho);
    pincel.fill();
    if (color === colorActual) {
      dibujarBarra(x, 50, ancho);
    }
  }

  function dibujarPaletaColores() {
    dibujarRecuadro(0, 0, 50, 0);
    dibujarRecuadro(50, 0, 50, 1);
    dibujarRecuadro(100, 0, 50, 2);
  }

  function dibujarCirculo(evento) {
    if (puedoDibujar) {
      var x = evento.pageX - pantalla.offsetLeft;
      var y = evento.pageY - pantalla.offsetTop;
      if (x <= 150 + radio && y <= 50 + radio) {
        //Área no graficable
      } else {
        pincel.fillStyle = colores[colorActual];
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2 * Math.PI);
        pincel.fill();
      }
    }
  }

  pantalla.onmousemove = dibujarCirculo;

  function habilitarDibujar() {
    puedoDibujar = true;
  }

  function deshabilitarDibujar() {
    puedoDibujar = false;
  }

  pantalla.onmousedown = habilitarDibujar;

  pantalla.onmouseup = deshabilitarDibujar;

  dibujarPaletaColores();

  function seleccionarColor(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
    console.log(x, y);
    if (x >= 0 && x <= 150 && y <= 50) {
      var indice = Math.floor(x / 50);
      colorActual = indice;
      dibujarPaletaColores();
    }
    return false;
  }

  pantalla.onclick = seleccionarColor;
</script>