Resolução - Desenhando com o Mouse - com funções Extras (troca de várias cores, aumenta e diminui a bolinha)

Decidi colocar mais cores, e utilizei quase tudo que já aprendemos tudo junto espero estar ajudando alguém

<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var desenha = false;
    var i = 0; //  <-------- linha adicionada 01
    var cor = ['blue','red','green','yellow','orange','black','white','purple','rose','darkred', 'lightred','brown']; // pode adicionar qualquer cor 
    var raio=10;
    var incremento = 10;
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    tela.oncontextmenu =  function () { // muda a cor
        i++;
        if (i == cor.length ) {  
            i=0;    
        }
        return false;
    }   

     tela.onmousedown = function (){
        desenha = true;
    }
    /*   2 versão
    function habilitarDesenhar(){  
        desenha = true;
        }
    */
    tela.onmouseup = function(){
        desenha = false;
     }
     /* 2 versão
        function desabilitaDesenhar(){
        desenha = false;
        }
     }  
     */

 //tela.onmousemove = desenhaCirculo;  // versão antiga
 // tela.onmousedown = habilitarDesenhar; // versão antiga
 //tela.onmouseup = desabilitaDesenhar; // versão antiga

    tela.onmousemove = function (evento) {

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

            if (evento.shiftKey) {        
                if (incremento <= 40){
                  incremento = incremento+1;  
                }           
            }
                pincel.fillStyle = cor[i];
                pincel.beginPath();
                pincel.arc(x, y, raio+incremento, 0, 2 * 3.14);
                pincel.fill();
                console.log(x + ',' + y);

                if (evento.altKey) {        
                    if (incremento > 5){
                    incremento = incremento - 1;  
                    }
             }
                 pincel.fillStyle = cor[i];
                pincel.beginPath();
                pincel.arc(x, y, raio+incremento, 0, 2 * 3.14);
                pincel.fill();
        }
    }
</script>