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

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "gray";
    pincel.fillRect(0, 0, 600, 400);


    pincel.fillStyle = "blue"; //colocar a cor fora da função, para ela se tornar um variavel global

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ", " + y);

    }


    function mudaCor() {
                     //azul    //vermelho   //verde
        var cores = ["#0000ff", "#ff0000", "#008000"];

        if (pincel.fillStyle == cores[0]) {pincel.fillStyle = cores[1]}
        else if (pincel.fillStyle == cores[1]) {pincel.fillStyle = cores[2]}
        else {pincel.fillStyle = cores[0]}

        return false;
    }

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;

</script>