A DrawLines Demo

The HTML file:

<html>
<head>

<script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 vPosition;

    void main() {
        gl_PointSize = 3.0;
        gl_Position = vPosition;
    }
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    }
</script>

    <script type="text/javascript" src="../Common/webgl-utils.js"></script>
    <script type="text/javascript" src="../Common/initShaders.js"></script>
    <script type="text/javascript" src="../Common/MV.js"></script>
    <script type="text/javascript" src="ui.js"></script>
    <script type="text/javascript" src="GLCanvas.js"></script>
</head>

<body>
     <h1>A DrawLines Demo</h1>
<script>
    'use strict'

    var WIDTH = 500;
    var HEIGHT = 500;
    var canvas1 = new Canvas(WIDTH, HEIGHT);
    var canvas2 = new Canvas(WIDTH/2, HEIGHT/2);

    Redisplay();
</script>

<p>
<select id="Shape" onchange="UpdateScene(this.value); Redisplay()">
    <option value='0'>Points</option>
    <option value='1'>Line Strip</option>
    <option value='2'>Line Loop</option>
    <option value='3'>Lines</option>
    <option value='4'>Triangle Strip</option>
    <option value='5'>Triangle Fan</option>
    <option value='6'>Triangles</option>
</select>
<p>

GLCanvas.js

'use strict'

class Canvas {
    constructor (width, height) {
        this.height = height;
        this.width = width;

        this.MakeCanvas();
        this.SetupGL();
        this.MakeShaders();
	this.SetupVBO();

        this.gl.viewport(0,0, this.width, this.height);

        this.Init();

        return this;
    }

    MakeCanvas() {
        if (this.width == undefined || this.width < 0) {
           this.width = 300;
        }

        if (this.height == undefined || this.height < 0) {
           this.height = 300;
        }

         this.canvas = document.createElement('canvas')
         this.canvas.height = this.height;
         this.canvas.width = this.width;
         document.body.appendChild(this.canvas);
    }

    SetupGL() {
        this.gl = WebGLUtils.setupWebGL(this.canvas);
        if (!this.gl) {
            alert ("WebGL isn't available");
	    return;
        }
	this.gl.getExtension('OES_standard_derivatives');
    }

    MakeShaders() {
        this.program = initShaders(this.gl, "vertex-shader","fragment-shader");
        this.gl.useProgram(this.program);
    }

    SetupVBO() {
        let bufferID = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, bufferID);

        let vPosition = this.gl.getAttribLocation(this.program, "vPosition");
        this.gl.vertexAttribPointer(vPosition,2,this.gl.FLOAT, false,0,0);
        this.gl.enableVertexAttribArray(vPosition);
    }

    Init() {
	this.list= [];

        this.gl.clearColor(1.0, 1.0, 1.0, 1.0);

        this.shape = '0';
        var p1 = vec2(this.width/2.0, this.height-20);
        var p2 = vec2(20, 20);
        var p3 = vec2(this.width-20, 20);

	this.tri = [p1, p2, p3]

	this.MakePoints();

        var gl = this.gl;
	this.gl.bufferData(gl.ARRAY_BUFFER,flatten(this.list),gl.STATIC_DRAW);
    }

    MakePoints() {
        this.count = 3*5;

        let x, y, r;
	let theta=0;

	let dtheta = 3.1415/this.count * 2;
 
        r = .75;

        for (var i=0; i<this.count; i++) {
            let tmp = vec2(r*Math.cos(theta), r*Math.sin(theta));
	    theta += dtheta;
	    this.list.push(tmp);
	}
	return;
    }

    SetShape(shape) {
         this.shape = shape;
	 return;
    }

    Display() {
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
        let type;

	switch(this.shape) {
	   case '1':
	       type = this.gl.LINE_STRIP; break
	   case '2':
	       type = this.gl.LINE_LOOP; break
	   case '3':
	       type = this.gl.LINES; break
	   case '4':
	       type = this.gl.TRIANGLE_STRIP; break
	   case '5':
	       type = this.gl.TRIANGLE_FAN; break
	   case '6':
	       type = this.gl.TRIANGLES; break
	   default:
	   case '0':
	       type = this.gl.POINTS; break
	}
	this.gl.drawArrays(type, 0, this.count);
        return;
    }
};

ui.js

'use strict'

function Redisplay() {

    canvas1.Display();
    canvas2.Display();
}

function UpdateScene(val) {
    canvas1.SetShape(val);
    canvas2.SetShape(val);
}