Edit in JSFiddle

//往后的先不研究
// cuon-utils.js (c) 2012 kanda and matsuda
/**
 * Create a program object and make current
 * @param gl GL context
 * @param vshader a vertex shader program (string)
 * @param fshader a fragment shader program (string)
 * @return true, if the program object was created and successfully made current 
 */
function initShaders(gl, vshader, fshader) {
  var program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.log('Failed to create program');
    return false;
  }

  gl.useProgram(program);
  gl.program = program;

  return true;
}

/**
 * Create the linked program object
 * @param gl GL context
 * @param vshader a vertex shader program (string)
 * @param fshader a fragment shader program (string)
 * @return created program object, or null if the creation has failed
 */
function createProgram(gl, vshader, fshader) {
  // Create shader object
  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
  if (!vertexShader || !fragmentShader) {
    return null;
  }

  // Create a program object
  var program = gl.createProgram();
  if (!program) {
    return null;
  }

  // Attach the shader objects
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  // Link the program object
  gl.linkProgram(program);

  // Check the result of linking
  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    var error = gl.getProgramInfoLog(program);
    console.log('Failed to link program: ' + error);
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
  }
  return program;
}

/**
 * Create a shader object
 * @param gl GL context
 * @param type the type of the shader object to be created
 * @param source shader program (string)
 * @return created shader object, or null if the creation has failed.
 */
function loadShader(gl, type, source) {
  // Create shader object
  var shader = gl.createShader(type);
  if (shader == null) {
    console.log('unable to create shader');
    return null;
  }

  // Set the shader program
  gl.shaderSource(shader, source);

  // Compile the shader
  gl.compileShader(shader);

  // Check the result of compilation
  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (!compiled) {
    var error = gl.getShaderInfoLog(shader);
    console.log('Failed to compile shader: ' + error);
    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

/** 
 * Initialize and get the rendering for WebGL
 * @param canvas <cavnas> element
 * @param opt_debug flag to initialize the context for debugging
 * @return the rendering context for WebGL
 */
function getWebGLContext(canvas, opt_debug) {
  // Get the rendering context for WebGL
  var gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) return null;

  // if opt_debug is explicitly false, create the context for debugging
  if (arguments.length < 2 || opt_debug) {
    gl = WebGLDebugUtils.makeDebugContext(gl);
  }

  return gl;
}

//从这里开始
let canvas  = document.getElementById("webgl");
let gl = canvas.getContext("webgl");
let VSHADER_SOURCE =
'attribute vec4 a_Position;'+
'void main(){'+
	'gl_Position = a_Position;'+
	'gl_PointSize = 10.0;'+// 设置尺寸
'}';

let FSHADER_SOURCE = 
'precision mediump float;' + //精度限定词，先不管
'uniform vec4 u_FragColor;' +  // uniform変数
'void main() {' +
	'gl_FragColor = u_FragColor;' +
'}';

initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);

//获取attribute变量的存储位置（地址）
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
let u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');

canvas.addEventListener("click",function(e){
	click(e,gl,canvas,a_Position,u_FragColor)
});

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

let g_points = [];
let g_colors = [];
function click(e, gl, canvas, a_Position, u_FragColor){
	let x = e.clientX;
	let y = e.clientY;
	let rect = e.target.getBoundingClientRect();
	x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);//换算，WebGL到顶就是1
	y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
	
	g_points.push([x, y]);//换个结构将位置信息一并存了
	if (x >= 0.0 && y >= 0.0) {//随便填充点颜色
    	g_colors.push([1.0, 0.0, 0.0, 1.0]);  // Red
  	} else if (x < 0.0 && y < 0.0) { // Third quadrant
    	g_colors.push([0.0, 1.0, 0.0, 1.0]);  // Green
  	} else {                         // Others
    	g_colors.push([1.0, 1.0, 1.0, 1.0]);  // White
  	}
	gl.clear(gl.COLOR_BUFFER_BIT);//先清再画
	for(let i=0,len=g_points.length;i<len;i++){
		let xy = g_points[i];
    	let rgba = g_colors[i];
		//将顶点位置传输给attribute变量
		gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);
		gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);
		gl.drawArrays(gl.POINTS, 0, 1);
	}
}

<canvas id="webgl" width="400" height="400"></canvas>