Error: How to draw circle using triangle fan in webgl?
<p>I am not able to draw the circle using triangle fan.</p>

<p>The following code is of my JavaScript file.
My html contains canvas and shaders.
Also I have another JavaScript which initializes the vertex shaders and fragment shaders. Initializing shaders from the other javascript files has no issues at all becuase it is working properly with other codes. </p>

<p>Please help me with this code, finding what is wrong with it. </p>

<pre><code>var xCenterOfCircle;
var yCenterOfCircle;
var centerOfCircle;
var radiusOfCircle = 200;
var ATTRIBUTES = 2;
var noOfFans = 80;
var anglePerFan;
var verticesData = [];
var canvas;
var gl;

window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

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

    //
    //  Configure WebGL
    //
    gl.viewport( 0.0, 0.0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    //  Load shaders and initialize attribute buffers

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


    drawCircle();

    // Load the data into the GPU

    var bufferId = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(verticesData), gl.STATIC_DRAW );

    // Associate out shader variables with our data buffer

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

    render();
}


function drawCircle()
{
    xCenterOfCircle = 400;
    yCenterOfCircle = 400;
    centerOfCircle = vec2(400, 400);
    anglePerFan = (2*Math.PI) / noOfFans;
    verticesData = [centerOfCircle];

    for(var i = 0; i &lt;= noOfFans; i++)
    {
        var index = ATTRIBUTES * i + 2;
        var angle = anglePerFan * (i+1);
        var xCoordinate = xCenterOfCircle + Math.cos(angle) * radiusOfCircle;
        var yCoordinate = yCenterOfCircle + Math.sin(angle) * radiusOfCircle;
        document.write(xCoordinate);
        document.write("\n");
        document.write(yCoordinate);
        var point = vec2(xCoordinate, yCoordinate);
        verticesData.push(point);
   }
}

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT );
    gl.drawArrays( gl.TRIANGLE_FAN, 0, verticesData.length/ATTRIBUTES );
}
</code></pre>

<p>This is my html code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Supper Bug Zapper&lt;/title&gt;
    &lt;script id="vertex-shader" type="x-shader/x-vertex"&gt;
        attribute vec4 vPosition;
        void main(void)
        {
            gl_Position = vPosition;
        }
    &lt;/script&gt;

    &lt;script id="fragment-shader" type="x-shader/x-fragment"&gt;
        precision mediump float;
        void main(void)
        {
            gl_FragColor = vec4(1.0, 0.0, 1.0, 0.5);
        }
    &lt;/script&gt;
    &lt;script type="text/javascript" src="js/webgl-utils.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/MV.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/initShaders.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/superBugZapper.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
      &lt;canvas id="gl-canvas" width="800" height="800"  style="border:1px solid #000000;"&gt;
      Oops ... your browser doesn't support the HTML5 canvas element
      &lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>