Solução com incrementos...

Olá, Fiz o código para que cada vez que a bolinha crescesse também mudasse de cor. E criei a função limpaTela, que limpa a tela e reinicia o tamanho da bolinha e as cores.

<canvas width="1100" height="500"></canvas>

<script>

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

    pincel.fillRect(0, 0, 1100, 500);
    tela.onclick = desenhaCirculo; //clique esquerdo insere bolinha.
    tela.oncontextmenu = limpaTela; //clique direito limpa tela.

    var raio = 10;
    var i = 0;
    var cores = ['white', 'lightgrey', 'grey', 'lightblue', 'blue', 'lightgreen', 'green', 'darkgreen', 'yellow', 'pink', 'red', 'darkred'];

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if(evento.shiftKey) { //clique esquerdo com SHIFT aumenta o tamanho e muda a cor.
            raio = raio + 2.5;
            i++;
        }

        if(i == cores.length) {
            i = 0;
        }

        pincel.fillStyle = cores[i];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*Math.PI);
        pincel.fill();


    }

    function limpaTela() {

        pincel.fillStyle = 'black';
        pincel.fillRect(0, 0, 1100, 500);
        i = 0; //reinicia as cores.
        raio = 10; //reinicia o tamanho.
        alert('Limpo!');
        return false;
    }

</script>