JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tela"></div>

CSS

#tela {
    background-color: blue;
    width: 500px;
    height: 500px;
    text-align: center;
    line-height: 450px;
    border: 15px dashed yellow;
}

JavaScript

var tela = document.getElementById("tela");
/* 
 * var c = tela.getContext("2d");
 * c.strokeStyle = "black";
 * c.strokeRect(0, 0, 600, 400); */

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

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * Math.PI);
    c.fill();
};

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

    c.fillStyle = "red";
    c.beginPath();
    c.arc(x, y, 10, 0, 2 * Math.PI);
    c.fill();
};

tela.addEventListener('mousedown', function(evento) {
	console.log(evento.which);
    if(1 === evento.which) {
        console.log('botão esquerdo');
        atira();
    } else if(3 === evento.which) {
        console.log('botão direito'); 
        atira2();
    }
}, false);

tela.addEventListener('contextmenu', function(event) {
    event.preventDefault();
}, false);