Dificuldade em alterar o código para mudar FORMA

Olá amigo, boa tarde!

Gostei da sua ideia, veja se era isso que estava tentando fazer. Comentei no código os ajustes que fiz. Abraços e bons estudos!

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


<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    //Mudei a cor do canvas com CSS, alterando a propriedade background color. É mais simples que mudar o fillStyle e depois ter que fazer um quadrado.
    tela.style="background-color: grey;"

    var formas = [desenhaCirculo,desenhaQuadrado]
    var indiceForma = 0; 

    //criei uma função auxiliar, que vai receber o evento do mouse e as coordenadas X e Y. Assim evita código duplicado (observe que no seu código, para cada forma que incluisse, teria que repetir o var x/var y/pincel.fillStyle,etc...)

    function desenhaGenerico(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = "black";
        //nesse ponto, a função desenhaGenerico vai chamar o elemento dentro da Array "formas" de acordo com o índice atual. Como os elementos da array são funções, eles vão receber os parâmetros (x,y) ao serem chamados.
        formas[indiceForma](x,y);
    };

    function desenhaCirculo(x,y) {
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
    };

    function desenhaQuadrado (x,y) {
        pincel.fillRect (x, y, 15, 15);
    };

    tela.onclick = desenhaGenerico;

    function mudaForma (){
        //simplifiquei essa parte com um operador ternário
        indiceForma < formas.length -1 ? indiceForma++ : indiceForma = 0;

        return false;
    };

    tela.oncontextmenu = mudaForma;

</script>

Era isso mesmo, muito obrigado! Consegui entender como você fez, mas ainda deu uma embaralhada na cabeça rsrs! Obg