[Proyecto] Dibujar y cambiar colores de círculos (ACTUALIZACIÓN)

Aquí dejo el código que desarrollé para la práctica de dibujar circulos y cambiar el color de relleno. Mirando el código del instructor, me doy cuenta de que es factible utilizar el índice de una rray por fuera y manipular dicho valor para su posterior uso. Es bueno seguir aprendiendo!!!

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

<script>

    const d = document

    var $canvas = d.querySelector("canvas")
    var brush = $canvas.getContext("2d")

    let canvasW = $canvas.getAttribute("width")
    let canvasH = $canvas.getAttribute("height")

  let circleColor = "blue"

    brush.fillStyle = "lightgray";
    brush.fillRect(0, 0, canvasW, canvasH);

    function drawCircleAtClick(pencil, radius, color, event) {
        let xClick = event.offsetX
        let yClick = event.offsetY
        pencil.fillStyle = color
        pencil.beginPath()
        pencil.arc(xClick, yClick, radius, 0, (2 * 3.14159))
        pencil.fill()
    }

  function changeColor(color) {
    if(color === "blue") {
      color = "red"
      return color
    }
    if(color === "red") {
      color = "green"
      return color
    }
    if(color === "green") {
      color = "blue"
      return color
    } 
  }

  $canvas.addEventListener("contextmenu", (event) => {
    event.preventDefault()
    if(event) circleColor = changeColor(circleColor)
  })


    $canvas.addEventListener("click", (e) => {
    if(event) {
      drawCircleAtClick(brush, 20, circleColor, e)
    }
    })

</script>

Acá está la actualización con la perspectiva del instructor pero a mi forma de genearar el código:

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

<script>

    const d = document

    var $canvas = d.querySelector("canvas")
    var brush = $canvas.getContext("2d")

    let canvasW = $canvas.getAttribute("width")
    let canvasH = $canvas.getAttribute("height")

  const colorsArr = ["blue", "red", "green"]
  let indexColors = 0

    brush.fillStyle = "lightgray";
    brush.fillRect(0, 0, canvasW, canvasH);

    function drawCircleAtClick(pencil, radius, indexColor, event) {
        let xClick = event.offsetX
        let yClick = event.offsetY
        pencil.fillStyle = colorsArr[indexColor]
        pencil.beginPath()
        pencil.arc(xClick, yClick, radius, 0, (2 * 3.14159))
        pencil.fill()
    }

  function updateIndexColors() {
    indexColors++
    if(indexColors >= colorsArr.length) indexColors = 0
    return indexColors
  }

  $canvas.addEventListener("contextmenu", (event) => {
    event.preventDefault()
    if(event) indexColors = updateIndexColors()
  })


    $canvas.addEventListener("click", (event) => {
    if(event) drawCircleAtClick(brush, 20, indexColors, event)
    })

</script>