Pensei em introduzir ferramentas de aumento e diminuição do traço

Assim

<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);
    pincel.strokeStyle = "black";
    pincel.strokeRect(0,0,600,400);


        var raio = 10;

        var desenha = false;

        tela.onmousemove = function desenhaCirculo(evento) {

        if (desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;


            console.log(x + ',' + y);

            if (evento.shiftKey) {

               raio = raio + 2; // raio agora passa a valer +20!
            }
            if (evento.ctrlKey) {

               raio = raio + 1; // raio agora passa a valer +10!
            }
            if (evento.altKey) {

               raio = raio - 1; // raio agora passa a valer -10!
            }

            raio=raio
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14);
            pincel.fill();

        }

    }

    tela.onmousedown = function() {

        desenha = true;
    }

     tela.onmouseup = function() {

        desenha = false;
    }
</script>