PROGRAMA - CANVAS

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "grey ";
    pincel.fillRect(0, 0, 600, 400);

    function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft; //pos x
        var y = evento.pageY - pantalla.offsetTop; //pos y
        pincel.fillStyle = "orange";
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14); //5 parametros:coordenadas,radio,angulo inicial,angulo final
        pincel.fill(); //para que se muestre el circulo
        console.log(x + " , " + y);

    }
    pantalla.onclick = dibujarCirculo;

    function alterarColor(oncontextmenu) {
        var x = oncontextmenu.pageX - pantalla.offsetLeft; //pos x
        var y = oncontextmenu.pageY - pantalla.offsetTop; //pos y
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14); //5 parametros:coordenadas,radio,angulo inicial,angulo final
        pincel.fill(); //para que se muestre el circulo
        console.log(x + " , " + y);
        return false;
    }
    pantalla.oncontextmenu = alterarColor;

</script>