webgl different options

lineloop etc

by bhupendra negi

HTML

<canvas id="mainCanvas">
    
</canvas>   
<button onclick="myFunction()">LINES</button>
<button onclick="myFunction1()">FAN</button>
<button onclick="myFunction2()">LINELOOP</button>
<button onclick="myFunction3()">POINTS</button>

CSS

canvas {
    width:1400;
    height:1400;
    display:block;
}
button {
  margin:10px;  
  display:inline-block;
  cursor:pointer  
}

JavaScript

var gl;
   var canvas = document.getElementById('mainCanvas');

function main(x)
{
   
   // Configure the canvas to use WebGL
   //

   try {
      gl = canvas.getContext('experimental-webgl');
   } catch (e) {
      throw new Error('no WebGL found');
   }

   // Copy an array of data points forming a triangle to the
   // graphics hardware
   //
   var vertices = [
        -0.8,0.5,-0.8,-0.5,
        -0.4,0.5,-0.4,-0.5,
        0.0,0.5,0.0,-0.5,
        0.4,0.5,0.4,-0.5,
        0.8,0.5,0.8,-0.5,
                
   ];
   var buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

   // Create a simple vertex shader
   //
   var vertCode =
        'attribute vec2 coordinates;' +
        'void main(void) {' +
        '  gl_Position = vec4(coordinates, 0.0, 1.0);' + 'gl_PointSize=5.0 ;' +
        '}';

   var vertShader = gl.createShader(gl.VERTEX_SHADER);
   gl.shaderSource(vertShader, vertCode);
   gl.compileShader(vertShader);
   if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS))
      throw new Error(gl.getShaderInfoLog(vertShader));

   // Create a simple fragment shader
   //
   var fragCode =
      'void main(void) {' +
      '   gl_FragColor = vec4(0.980392, 0.921569, 0.843137, 1.0);' +
      '}';

   var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
   gl.shaderSource(fragShader, fragCode);
   gl.compileShader(fragShader);
   if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS))
      throw new Error(gl.getShaderInfoLog(fragShader));

   // Put the vertex shader and fragment shader together into
   // a complete program
   //
   var shaderProgram = gl.createProgram();
   gl.attachShader(shaderProgram, vertShader);
   gl.attachShader(shaderProgram, fragShader);
   gl.linkProgram(shaderProgram);
   if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
      throw new Error(gl.getProgramInfoLog(shaderProgram));

   // Everything we...