Solución sin arreglo

Hola Carlos , espero que esté bien.

Si conseguiste la solución te sugerimos implementar en código y compartir para poder ver las diferentes soluciones al mismo problema.

Un saludo.

Lo lamento no sabía como publicar código en este foro, ya que lo copié y pegue y no se publicaba. Espero revisen mi solución y me den su opinión :) gracias buen día.

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

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

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

    function exibirAlerta(evento)
    {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        console.log(evento);
        alert(x+","+y);
    }

    function dibujarCirculo(evento)
    {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();

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


    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor()
    {
        if(color=="blue")
        {
            color="red";
        }
        else
        {
            if(color=="red")
            {
                color="green";
            }
            else
            {
                color="blue";
            }
        }

        alert("Funcionó se cambió al color : "+color);
        return false;
    }

    pantalla.oncontextmenu = alterarColor;



</script>