[Sugerencia] Diseñando con el mouse

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

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

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

  let puedoDibujar = false;
  let color = "blue";

  const dibujarCuadrado = (x, color) => {
    pincel.fillStyle = color;
    pincel.fillRect(x, 0, 50, 50);
  };

  const paletaColores = () => {
    dibujarCuadrado(0, "red");
    dibujarCuadrado(50, "green");
    dibujarCuadrado(100, "blue");
  };

  paletaColores();

  const dibujarCirculo = (event) => {
    let x = event.pageX - pantalla.offsetLeft;
    let y = event.pageY - pantalla.offsetTop;
    if (puedoDibujar && (x > 155 || y > 55)) {
      pincel.fillStyle = color;
      pincel.beginPath();
      pincel.arc(x, y, 5, 0, 2 * 3.14);
      pincel.fill();
    }
  };

  const habilitarDibujar = () => {
    puedoDibujar = true;
  };

  const deshabilitarDibujar = () => {
    puedoDibujar = false;
  };

  const cambiarColor = (event) => {
    let x = event.pageX - pantalla.offsetLeft;
    let y = event.pageY - pantalla.offsetTop;

    if (x <= 50 && y <= 50) {
      color = "red";
    }
    if (x > 50 && x <= 100 && y <= 50) {
      color = "green";
    }
    if (x > 100 && x <= 150 && y <= 50) {
      color = "blue";
    }
  };

  pantalla.onmousemove = dibujarCirculo;
  pantalla.onmousedown = habilitarDibujar;
  pantalla.onmouseup = deshabilitarDibujar;
  pantalla.onclick = cambiarColor;
</script>