Ejercicio cirulos

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

<script>

//WORKING AREA 

    var screen = document.querySelector ("canvas");
    var brush = screen.getContext ('2d');
    brush.fillStyle = "black";
    brush.fillRect (0,0,600,400);


    var colours = ["blue","red","green"];
    var indexColours = 0; 

    function drawCircle(event) {

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

         if (indexColours>= 3){
            indexColours=0

                }

        brush.fillStyle = colours[indexColours];
        brush.beginPath();
        brush.arc (x,y,10,0,2*3.14);
        brush.fill ();
        console.log (x +" ; "+ y);
        indexColours++

                  }

     function alterColour() {
        return false;

            }


screen.onclick = drawCircle;
screen.oncontextmenu = alterColour;

</script>