SOURCE

function main() {
    const canvas = document.querySelector('#c')
    const gl = canvas.getContext('webgl')
    if (!gl) {
        return;
    }

    const program = webglUtils.createProgramFromScripts(gl, ['vertex-shader-2d', 'fragment-shader-2d'])

    const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

    const resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');

    const positionBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    const positions = [
        10, 20,
        80, 20,
        10, 30,
        10, 30,
        80, 20,
        80, 30
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);

    gl.enableVertexAttribArray(positionAttributeLocation);

    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    const size = 2;
    const type = gl.FLOAT;
    const normalize = false;
    const stride = 0;
    const offset = 0;
    gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

    // set the resolution
    gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);

    // draw
    const primitiveType = gl.TRIANGLES;
    const offset_1 = 0;
    const count_1 = 6;
    gl.drawArrays(primitiveType, offset_1, count_1)
}

main()

<canvas id="c" width="400" height="300"></canvas>

<script id="vertex-shader-2d" type="shader">
    attribute vec4 a_position;
    uniform vec2 u_resolution;

    void main() {
        // convert the position from pixels to 0.0 to 1.0
        vec2 zeroToOne = a_position.xy / u_resolution;

        // convert from 0->1 to 0->2
        vec2 zeroToTwo = zeroToOne * 2.0;

        // convert from 0->2 to -1->1
        vec2 clipSpace = zeroToTwo - 1.0;

        // clipSpace * vec2(1, -1) 是为了翻转y坐标系
        gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
    }
</script>

<script id="fragment-shader-2d" type="shader"">
  // 片断着色器没有默认精度，所以我们需要设置一个精度
  // mediump是一个不错的默认值，代表“medium precision”（中等精度）
  precision mediump float;
 
  void main() {
    // gl_FragColor是一个片断着色器主要设置的变量
    gl_FragColor = vec4(1, 0, 0.5, 1); // 返回“瑞迪施紫色”
  }
</script>