A DrawLines Demo

The HTML file:

<html>
<head>

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

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

<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

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="GLCanvas.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

</head>

<body>
     <h1>A DrawLines Demo</h1>
<script>
    var WIDTH = 500;
    var HEIGHT = 500;
    var canvas = new Canvas(WIDTH, HEIGHT);
    canvas.Redisplay();
</script>

<p>
<select id="Shape" onchange="canvas.SetShape(this.value); canvas.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>

The Javascript File

function Canvas(width, height, locID) {
    if (width == undefined || width < 0) {
       width = 300;
    }

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

    var canvas = document.createElement('canvas')
        canvas.height = height;
        canvas.width = width;

    if(locID == undefined) {
        document.body.appendChild(canvas);
    } else {
        div = document.getElementById(locID);
        if (null == div) {
            document.body.appendChild(canvas);
        } else {
            div.appendChild(canvas);
        }
    }

    document.body.appendChild(canvas);

    this.height = height;
    this.width = width;

    // new stuff
    this.gl = WebGLUtils.setupWebGL(canvas);
    if (!this.gl) {
        alert ("WebGL isn't available");
    }

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

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

    var bufferID = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, bufferID);

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

    // end new stuff

    this.count = 3*5;
    this.Init();

    return this;
}

Canvas.prototype = {

    Init: function() {
	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);
    },

    SetShape: function(shape) {
         this.shape = shape;
	 return;
    },

    MakePoints: function() {
        var x, y, r;
	var theta=0;
	var dtheta = 3.1415/this.count * 2;
 
        r = .75;

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

    Redisplay: function() {
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
        var 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;
    }
};