onmousemove + tamanho do raio

incrementa e decrementa gradativamente:

<canvas width="600" height="400"></canvas>
<p style="font-weight: bold"></p>

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

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

  let cor = ["blue", "red", "green"];
  let aux = 0;
  let raio = 10;
  let mouse = false;

  desenhaCirculo = (evento) => {
    if (mouse) {
      let x = evento.pageX - tela.offsetLeft;
      let y = evento.pageY - tela.offsetTop;
      pincel.fillStyle = cor[aux];
      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[aux];

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

    return evento;
  };

  tela.addEventListener("mousemove", desenhaCirculo);

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

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

  mudaCor = () => {
    aux++;

    // Reseta a cor
    if (aux == 3) {
      aux = 0;
    }

    return false;
  };
  tela.oncontextmenu = mudaCor;
</script>