Minha resolução

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>


<script>

  var tela = document.querySelector("canvas");
  var pincel = tela.getContext("2d");

  pincel.fillStyle = "grey";
  pincel.fillRect(0, 0, 600, 400);

  var raio = 10;

  function desenhaCirculo(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    console.log(x + " , " + y);
    if (evento.shiftKey && raio < 40) {
      raio += 10;
    }
    if (evento.altKey && raio >= 10) {
      raio -= 5;
    }
    pincel.fillStyle = "blue"
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * 3.14);
    pincel.fill();

  }

  tela.onclick = desenhaCirculo;


</script>

Eu fiz diferente, coloquei que se o raio ficar menor que 10, a função tem que parar de funcionar, não deixei tamanho máximo.

        if (evento.shiftKey) {

           raio = raio + 10;
        } if (evento.altKey) {
            raio= raio -10;
        } if (raio < 10) {
            raio = 10;
        }