Как щелкнуть каждый многоугольник (с заданными координатами), нарисованный с помощью холст HTML, только один раз, а затем навсегда обвести их зеленым цветом?

Question

const canvas = document.getElementById("canvas");
const cx = canvas.getContext("2d");

var ar = {
  "vertices": [
  [{ "x": 15, "y": 5 }, { "x": 28, "y": 2 }, { "x": 37, "y": 49 }, { "x": 24, "y": 51 }],
  [{ "x": 106, "y": 5 }, { "x": 252, "y": 3 }, { "x": 252, "y": 36 }, { "x": 106, "y": 38 }],
  [{ "x": 16, "y": 40 }, { "x": 296, "y": 41 }, { "x": 296, "y": 100 }, { "x": 16, "y": 99 }],
  [{ "x": 26, "y": 123 }, { "x": 255, "y": 124 }, { "x": 255, "y": 239 }, { "x": 26, "y": 238 }],
  [{ "x": 106, "y": 376 }, { "x": 255, "y": 375 }, { "x": 255, "y": 393 }, { "x": 106, "y": 394 }]]
};

function drawpolygon(e) {
  let x, y;

  if (e) {
    const {clientX, clientY, currentTarget} = e;
    const {left, top} = currentTarget.getBoundingClientRect();
    x = clientX - left;
    y = clientY - top;
  }
  for (i = 0; i < ar.vertices.length; i++) {
    for (j = 0; j <= 3; j++) {

      cx.beginPath();
      cx.lineTo(ar.vertices[i][0].x, ar.vertices[i][0].y);
      cx.lineTo(ar.vertices[i][1].x, ar.vertices[i][1].y);
      cx.lineTo(ar.vertices[i][2].x, ar.vertices[i][2].y);
      cx.lineTo(ar.vertices[i][3].x, ar.vertices[i][3].y);

      if (j == 3) {
        cx.lineTo(ar.vertices[i][0].x, ar.vertices[i][0].y);
      }

      cx.closePath();

      // Paint green if the click was in the path, red otherwise
      cx.strokeStyle = cx.isPointInPath(x, y) ? "green" : "red";
      cx.lineWidth = "1.5";
      cx.stroke();
    }
  }
}
// Draw immediately for reference
drawpolygon();
// Draw again whenever we click
canvas.addEventListener("click", drawpolygon);

<canvas id="canvas" width="512" height="512"></canvas>

Мне нужна идея, чтобы кликать по каждому многоугольнику не более одного раза. После щелчка по холсту он должен оставаться зеленым и больше не щелкаться. В настоящее время рисунок можно нажимать снова и снова. Как это сделать?