Draw 1 pixel with Webgl

1pixel-wegbl.txt

canvas.width = canvas.height = 400;

left-top is the origin in pixels
|---|---|
|   |   |
|---o---|
|   |   |
|---|---|
`o` is the origin in Webgl viewport

// Vertex shader program
var VSHADER_SOURCE =
  'void main() {\n' +
  '  const mat4 pMatrix = mat4(0.005 ,0,0,0, 0, -0.005,0,0, 0,0,1.0,1.0, -1.0,1.0,0,0);\n' +
  '  gl_Position = pMatrix * vec4(399.5, 399.5, 1.0, 1.0);\n' + // Set the vertex coordinates of the point
  '  gl_PointSize = 1.0;\n' + // Set the point size
  '}\n';


Note:

1. The coordinate pass in the vertex shader (gl_Position) are the center of each pixel 
   rather than at left-top-corner of each pixel, thus,
   point (399, 399) in vertex shader is (399 + 0.5, 399 + 0.5).
   Drawing triangles does not need to add (0.5, 0.5). Just for drawing Point.
   
2. Point (399.5, 399.5, *1.0*), 1.0 (not 0.0) to keep matrix Z-aix unchanged for 2d matrix operation, 
   like (x,y,z,1.0) for 3d matrix operation, the same issue.