Minha solução:

<canvas width="600" height="400"></canvas>
<p style="font-weight: bold"></p>
<h3>Escolha uma cor</h3>
<input type="color" />

<script>
  let p = document.querySelector("p");
  let input = document.querySelector("input");

  let tela = document.querySelector("canvas");
  let pincel = tela.getContext("2d");
  pincel.fillStyle = "grey";
  pincel.fillRect(0, 0, 600, 400);


  let raio = 10;
  let mouse = false;

  desenhaCirculo = (evento) => {
    // recebe o valor do input referente a cor
    let cor = input.value;
    if (mouse) {
      let x = evento.pageX - tela.offsetLeft;
      let y = evento.pageY - tela.offsetTop;
      pincel.fillStyle = cor;
      pincel.beginPath();
      pincel.arc(x, y, raio, 0, 2 * Math.PI);
      pincel.fill();
    }

    // aumenta o raio gradativamente
    if (evento.shiftKey && raio < 40) {
      raio += 0.1;
    }

    if (evento.altKey) {
      //diminuir o raio gradativamente
      raio -= 0.1;

      //limite de 10 para o raio
      if (raio < 10) {
        raio = 10;
      }
    }

    p.style.color = cor;

    // Informa a cor e o tamanho do raio
    p.innerHTML = `Cor em hexadecimal: ${cor} <br> Tamanho do pincel: ${raio.toFixed(
      0
    )}`;

    return evento;
  };

  tela.addEventListener("mousemove", desenhaCirculo);

  tela.onmousedown = () => {
    mouse = true;
  };

  tela.onmouseup = () => {
    mouse = false;
  };
</script>