Curiosidade

<canvas id="tela" width="600" height="400"></canvas>
<script>
    function circuloAzul(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        c.fillStyle = "blue";
        c.beginPath();
        c.arc(x,y,20,0,2*3.14);
        c.fill();
    }
    function circuloVermelho(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        c.fillStyle = "red";
        c.beginPath();
        c.arc(x,y,20,0,2*3.14);
        c.fill();
        evento.preventDefault();
    }

    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "gray";
    c.fillRect(0,0,600,400);

    tela.onmousedown = circuloAzul;
    tela.oncontextmenu = circuloVermelho;

</script>

Esse é o meu código e deu muito trabalho para fazê-lo. Eu queria ter três funções: mostraClique, circuloAzul, circuloVermelho. Algo como:

funcao mostraClique() {
    se( botao_direito) {
        circuloAzul();
    }
    se(botao_esquerdo) {
        circuloVermelho();
    }
}

chamando função MostraClique();

Mas tive muita dificuldade para implementar. Eu tentei, por exemplo, colocar onmousedown e oncontextmenu como parâmetros dos ifs mas não deu certo. Enfim... Agora percebi outra coisa: quando mantenho pressionado o botão direito do mouse é pintado vermelho, quando solto se transforma em azul. Isso é normal ou é algum erro no meu código?