Cambiando colores | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Esta es mi version del codigo.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas width="600" height="400"></canvas>
    <script>
      var pantalla = document.querySelector("canvas");
      var pencil = pantalla.getContext("2d");

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

      var color = ["blue", "red", "green"];
      var indice = 0;

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

        pencil.fillStyle = color[indice];
        pencil.beginPath();
        pencil.arc(x, y, 10, 0, 2 * 3.14);
        pencil.fill();

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

      pantalla.onclick = dibujarCirculo;

      function alterarColor(evento) {
        if (color[indice] == "green") {
          indice = 0;
        } else {
          indice++;
        }
        return false;
      }
      pantalla.oncontextmenu = alterarColor;
    </script>
  </body>
</html>