En el siguiente programa se modifico la impresion de puntos con el mouse para que imprima con otros dos colores(click derecho del mouse para cambiar colores) los circulos que se dibujen al hacer click (click izquierdo)

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400);
    var colores = ["blue","red","green"];
    var colorActual =0; //mueestra el primer color del array

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = colores[colorActual];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        colorActual++;
        if(colorActual>=3)
        {
            colorActual=0;
        }
        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>