<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vida</title>
</head>
<body>
    <canvas class= "lienzo" width="600" height="400"></canvas>
    <script>
        const canvas = document.querySelector(".lienzo");
        const ctx = canvas.getContext("2d");

        let colors = ["#00FFFF", "#A52A2A", "#7CFC00"];
        var cont = 0;

        ctx.fillStyle = "lightgrey";
        ctx.fillRect(0,0,600,400);

        canvas.addEventListener("click", draw);
        canvas.addEventListener("contextmenu", change);

        function draw(event){

            var x = event.pageX - canvas.offsetLeft;
            var y = event.pageY - canvas.offsetTop;

            ctx.fillStyle = colors[cont];
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2*3.14);
            ctx.fill();

            console.log("Usted hizo un clic en: x -" + x + " y -" + y);
        }
        function change(event){
            event.preventDefault();
            cont ++;


            if (cont <= 2){
                    console.log("Sigue sumando");
            } 
            else{
                    cont = 0;
                    console.log("Vuelve a cero");
            }
        }
    </script>

</body>
</html>

Prueba:

la cantidad de puntos del mismo color indica el número de clics con el botón derecho del mouse. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad