Programa de dibujo | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Yo tengo otra forma de cambiar de color y hacer la paleta de colores. También le agregue una función muy simple para hacer de borrador. Aquí una prueba rápida del programa. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <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);

      // colores, la posicion para la lista
      var colores = ["lightblue", "pink", "lightgreen", "grey"];
      var posicion = 0;

      var puedoDibujar = false;

      // dibujar referente de colores
      function barrita() {
        var x = 0;
        for (var i = 0; i < colores.length; i++) {
          pincel.fillStyle = colores[i];
          pincel.fillRect(0 + x, 0, 50, 50);
          x += 50;
        }
      }

      // el color ahora puede cambiar si posicion cambia
      // el celeste esta por defecto, posicion = 0, colores["lightblue"]
      function dibujarCirculo(x, y) {
        if (puedoDibujar) {
          pincel.fillStyle = colores[posicion];
          pincel.beginPath();
          pincel.arc(x, y, 5, 0, 2 * 3.14);
          pincel.fill();
        }
      }

      // posiciones para poder hacer el click
      var x_celeste = 0;
      var x_rosa = 50;
      var x_verde = 100;
      var y_cuadrado = 0;
      var cuadrado = 50;

      // cambia el numero de posicion si se hace click en el lugar indicado
      // por lo que cambia el color en dibujarCirculo
      function cambiar_color(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (y > y_cuadrado && y < y_cuadrado + cuadrado) {
          if (x > x_rosa && x < x_rosa + cuadrado) {
            posicion = 1;
          } else if (x > x_verde && x < x_verde + cuadrado) {
            posicion = 2;
          } else if (x > x_celeste && x < x_celeste + cuadrado) {
            posicion = 0;
          }
        }
      }

      // con click derecho cambia la posicion al color grey
      // para que al dibujar con el izquierdo se lo pueda usar de "borrador"
      function borrador() {
        posicion = 3;
        return false;
      }

      function habilitarDibujar() {
        puedoDibujar = true;
      }

      function deshabilitarDibujar() {
        puedoDibujar = false;
      }

      // para no dibujar encima del referente de colores
      function limite_dibujo(x, y) {
        if (x >= 0 && x < 3 * cuadrado + 5 && y >= 0 && y < cuadrado + 5) {
          return false;
        } else {
          return true;
        }
      }

      function movimiento_mouse(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (limite_dibujo(x, y)) {
          dibujarCirculo(x, y);
        }
      }

      pantalla.onmousemove = movimiento_mouse;
      pantalla.onmousedown = habilitarDibujar;
      pantalla.onmouseup = deshabilitarDibujar;

      barrita();
      pantalla.onclick = cambiar_color;
      pantalla.oncontextmenu = borrador;
    </script>
  </body>
</html>