Associar a cor com a função.

Olá, me parece que faltou um meio de um sistema entender qual cor você gostaria de estar usando, pois ali você apenas introduziu elas, não chegou a mostrar quando ela deve ser mudada. Poderiam escrever o código dessa maneira:

<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); 
   // você pode criar um array com todas as cores e um contador, então com a função mudaCor ela altera o número do contador, assim mudando a cor escolhida.
    var cores = ["blue","green","red"];
    var contador = 0
    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft; 
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[contador]; 
        pincel.beginPath ();
        pincel.arc (x,y,10,0,2 * 3.14);
        pincel.fill ();
        } 
    tela.onclick = desenhaCirculo; 

    function mudaCor() {
        contador++
    // se o contador atingir o mesmo número de variáveis do array o if acontece.
//blue = 0; green = 1; red = 2----- logo o array possui 3 informações contidas nele
        if(contador == cores.length){
        contador = 0;
    }
    return false;
    }

    tela.oncontextmenu = mudaCor; 

</script>

O contador inicia no 0 pois em arrays a primeira informação é a 0,nesse caso sua função mudaCor for serve apenas para aumentar ou resetar o contador. Caso não goste dessa ideia poderia usar também alguns If para escolher a cor desejada.

Obrigada pela sua resposta, consegui entender a logica com o uso de array. Porém enquanto esperava algum retorno, desenvolvi uma outra solução com o uso de If, e também não funcionou, poderia me dizer o que há de errado?

<canvas width="600" height="400"></canvas> 
<script> 
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');
    var cores = 'blue'; 
    var indice = 0;

    pincel.fillStyle = 'grey'; 
    pincel.fillRect (0,0,600,400);

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft; 
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores; 
        pincel.beginPath ();
        pincel.arc (x,y,10,0,2 * 3.14);
        pincel.fill ();
        } 
    tela.onclick = desenhaCirculo; 

    function mudaCor() { 

        indice++;

        if(indice=0){
            cores='blue';
        }
        if(indice=1){
            cores='green';
        }
        if(indice=2){
            cores='red';
        }

        return false;

    }

    tela.oncontextmenu = mudaCor; 



</script>