Fiz diferente, utilizei o onmousedown, porém depois vou implementar o preventDefault. Abaixo o código.

Mas ainda tem um pequeno detalhe , se eu dou o clique com o botão do meio do mouse ele ainda pinta a tela com a bolinha vermelha. Seria um bom desafio fazer com que a bolinha vermelha só apareça com o clique do direito do mouse.

Lucas,

Para alterar a cor do clique conforme botão você pode utilizar o metodo which de evento que retorna um inteiro para cada clique de um botão especifico: 1 para esquerdo, 2 para botao do meio e 3 para direito, eu utilizei com um if abaixo mas pode ser utilizado com um switch case também, fica ao seu critério.

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

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

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

function desenhaCirculo(cor,x,y){
    c.fillStyle=cor;
    c.beginPath();
    c.arc(x,y,10,0,2*3.14);
    c.fill();
}


function atira(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
evento.preventDefault();

    if(evento.which == 1){
        desenhaCirculo("red",x,y);
    } else if(evento.which == 2){
        desenhaCirculo("green",x,y);
    }else {
        desenhaCirculo("blue",x,y);
    }
}

tela.onclick = atira;
tela.oncontextmenu = atira;

</script>

Lucas, pela alteração apresentada pelo Gustavo você tem o resultado esperado.