O Limite de crescimento e de decremento é definido por uma cor

A partir da cor "darkred" sabemos que não podemos acrescentar ou diminuir.

<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);
        cor = "darkred";  // cor limite


// Quando chega ao limite máximo que é 40, volta a ser "darkred" 
    if(evento.shiftKey && raio < 40) {
            cor = "gold";
            raio = raio + 10;   
        }

//Quando chega ao valor mínimo que é 10, volta a ser "darkred"
        if(evento.altKey && raio > 10) {
            cor = "green";
            raio = raio - 5; 
        }

    pincel.fillStyle = cor; //cor varia dependendo do botão selecionado
    pincel.beginPath();
    pincel.arc(x, y,raio, 0, 2 * 3.14);
    pincel.fill();
    }

  tela.onclick = desenhaCirculo;

</script>