[Sugerencia] mejoré un poco el código del los círculos de colores

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

<script> var pantalla = document.querySelector("canvas"); var pincel = pantalla.getContext ("2d");

pincel.fillStyle= "grey";
pincel.fillRect(0,0,600,400);
var i=0;
var Vector = ["blue","red","green"];


function activador () {
    if(true){
        i++;
        if (i==3) {
            i=0;
        }

        alert(i);
    }
    return(i);
}

function color () {
    return (Vector [i]);
}
function alerta (evento){
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
    //////////////////////////////
    pincel.fillStyle = color();
    pincel.beginPath();
    pincel.arc(x,y,50,0,2*3.14);
    pincel.fill();
    /////////////////////////////

    if (i==0) {
        pincel.font= "20px Georgia";
        pincel.fillStyle="black";
        pincel.fillText( "  Color" ,x-41,y);
        pincel.fillText( "  Azul" ,x-41,y+19);
    } else {
        if (i==1) {
            pincel.font= "20px Georgia";
            pincel.fillStyle="black";
            pincel.fillText( "  Color" ,x-41,y);
            pincel.fillText( "  Rojo" ,x-41,y+19);
        } else {
            if (i==2) {
                pincel.font= "20px Georgia";
                pincel.fillStyle="black";
                pincel.fillText( "  Color" ,x-41,y);
                pincel.fillText( "  Verde" ,x-41,y+19);

            }
        }
    }

    console.log( x+ " , "+ y  );

}
pantalla.onclick= alerta;
pantalla.oncontextmenu= activador;

</script>