Trocando de cor

Demonstrando meu código:

<style>
    main{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

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

<script>

    function desenhaPonto(evento){
        var x = evento.x - tela.offsetLeft;
        var y = evento.y - tela.offsetTop;

        pincel.fillStyle = cores[indiceCor];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
    }

    function mudaCor(evento) {
        if (indiceCor < 2) {
            indiceCor++;
        } else {
            indiceCor = 0;
        }
        return false; // Cancela menu contextual do botão direito
    }

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

    var cores = ["blue", "red", "green"];
    var indiceCor = 0;

    pincel.fillStyle = "gray";
    pincel.fillRect(0, 0, 600, 400);
    pincel.fillStyle = cores[indiceCor];

    tela.onclick = desenhaPonto;
    tela.oncontextmenu = mudaCor; // Função por clique do botão direito do mouse

</script>