Dicas aplicadas, porém, o tamanho do raro agora não é mais gradativo o que fazer?

Olá Gabriel, tudo bem com você ?

Primeiramente gostaria de lhe agradecer pela paciência em aguardar um retorno aqui no fórum.

Em segundo sobre o seu código eu gostaria de lhe parabenizar por ele pois ele está muito bom, considerando que a sua construção foi feita sem o apoio de um vídeo do instrutor. Agora falando sobre o problema no seu código, ao testar ele, percebi que ele estava gerando um erro que fazia o raio “saltar” de 10 para 40 e depois de 40 para 10, esse erro se deu porque você colocou esses códigos aqui:

if (evento.shiftKey) {
            if(raio < 40)
                raio = raio + 10;
            }

if (evento.altKey) {
    if(raio > 10 )
        raio = raio - 5
  }

Para alterar o raio da bolinha, ele serve bem, porém o seu erro foi o de colocar elas de forma avulsa no programa. Portanto para consertar o seu código você só precisa colocar o primeiro if dentro da tela.onmousedown = function(), e o segundo if dentro da tela.onmouseup = function(). Assim o seu código final com as devidas alterações será o seguinte:

<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 cores = ['blue', 'red', 'green']
    var indiceCorAtual = 0;
    var raio = 10;
    var desenha = false;


    tela.onmousemove = function(evento) {

        if(desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cores[indiceCorAtual];
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14);
            pincel.fill();
        }
    console.log(x + ',' + y);

    tela.onmousedown = function() {

        desenha = true;

            if (evento.shiftKey) {
              if(raio < 40)
                raio = raio + 10;
            }
    }

        tela.onmouseup = function() {

            desenha = false;

            if (evento.altKey) {
             if(raio > 10 )
                raio = raio - 5
            }
        }
    }

    function mudaCor() {

        indiceCorAtual++

        if(indiceCorAtual == 3 ) {
            indiceCorAtual = 0;

        }

        return false;

    }

    tela.oncontextmenu = mudaCor;



</script>

Espero ter ajudado. Caso surjam mais dúvidas recorra ao nosso fórum, ficaremos muito felizes em ajudar.

Um grande abraço, e bons estudos!