ctx.addEventListener("click", (e) => {
    const x = e.clientX
    const y = e.clientY
    const {top, left, width, height} = e.target.getBoundingClientRect()
    const domx = x - left;
    const domy = y - top;
    const halfWidth = width / 2;
    const halfHeight = height / 2;
    const clickX = (domx - halfWidth) / halfWidth;
    const clickY = (halfHeight - domy) / halfHeight;
    gl.vertexAttrib2f(aPosition, clickX, clickY)
    gl.drawArrays(gl.POINTS, 0, 1)   
})

  const points = [];
  ctx.addEventListener("click", (e) => {
    const x = e.clientX
    const y = e.clientY
    const {top, left, width, height} = e.target.getBoundingClientRect()
    const domx = x - left;
    const domy = y - top;
    const halfWidth = width / 2;
    const halfHeight = height / 2;
    const clickX = (domx - halfWidth) / halfWidth;
    const clickY = (halfHeight - domy) / halfHeight;
    points.push({
      clickX,clickY
    })
    for (let i = 0; i < points.length; i++) {
      const {clickX, clickY} = points[i];
      gl.vertexAttrib2f(aPosition, clickX, clickY)
      gl.drawArrays(gl.POINTS, 0, 1)
    }
  })

我理解的是上面那种方法和下面那种都是重复绘制，为什么上面那种是覆盖，下面那种是添加？