Decremento e limites

Minha solução:

<script>
<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;

  desenhaCirculo = (evento) => {
    let x = evento.pageX - tela.offsetLeft;
    let y = evento.pageY - tela.offsetTop;

    // altera o tamanho do círculo
    if (evento.shiftKey && raio < 40) {
      raio += 10;
    }

    if (evento.altKey) {
      //decrementa em 5
      raio -= 5;

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

    pincel.fillStyle = cor[aux];
    pincel.beginPath();
    // soma o valor de cont para o raio atual
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();

    p.style.color = cor[aux];
    p.innerHTML = cor[aux];

    return evento;
  };

  tela.addEventListener("click", desenhaCirculo);

  mudaCor = () => {
    aux++;

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

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