Paleta de colores

Hola Edgar, no se puede ver tu codigo, cuando lo compartas debes seleccionar el boton que dice Insertar bloque de codigo y se abren como una especie de pestañas, luego ahi si puedes pegar tu codigo te parecera como en color marron el código.

Mira yo lo hice de la siguiente manera diferente a la del profe, un poco mas simple con condicionales, si tienes alguna duda del codigo por favor me cuentas:

<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 xRojo = 0;
    var xVerde = 50;
    var xAzul = 100;
    var yCuadrados = 0;
    var tamanhoCuadrados = 50;

    function dibujarCudrado(x, y, tamanho, color) {
      pincel.fillStyle = color;
      pincel.fillRect(x, y, tamanho, tamanho);
    }

    dibujarCudrado (xRojo,yCuadrados,tamanhoCuadrados,"red");
    dibujarCudrado (xVerde,yCuadrados,tamanhoCuadrados,"green");
    dibujarCudrado (xAzul,yCuadrados,tamanhoCuadrados,"blue");

    var puedoDibujar = false;
    var colorActual = "blue";

    function seleccionColor(evento) {
      var x = evento.pageX - pantalla.offsetLeft;
      var y = evento.pageY - pantalla.offsetTop;
      if (x >= xRojo && x <= xRojo+tamanhoCuadrados && y < tamanhoCuadrados) {
        colorActual = "red";
      } else if (x > xVerde && x <= xVerde + tamanhoCuadrados && y < tamanhoCuadrados) {
        colorActual = "green";
      } else if (x > xAzul && x <= xAzul+tamanhoCuadrados && y < tamanhoCuadrados) {
        colorActual = "blue";
      } else {
        colorActual = colorActual;
      }
    }

    pantalla.onclick = seleccionColor;

    function dibujarCirculo(evento) {
      if (puedoDibujar) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        pincel.fillStyle = colorActual;
        if(x>0 && x<150 && y>0 && y<50){
            puedoDibujar = false;
        }

        if (puedoDibujar){
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
      }
    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {
      puedoDibujar = true;
    }

    function deshabilitarDibujar() {
      puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;
</script>