Drawing an Ellipse

This JavaScript WebGL program demonstrates how draw an ellipse using points.

DrawEllipse.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>
    <script  id="idVertexShader" type="c">
      attribute float afVertIndex;
      uniform float ufVertexCount;

      void main() {
        float fAngleRad = 2.0 * radians(180.0) * (afVertIndex / ufVertexCount);

        vec2 qCoordXY = vec2(.9*cos(fAngleRad), .4*sin(fAngleRad));

        gl_Position = vec4(qCoordXY, 0.0, 1.0);
        gl_PointSize = 2.0;
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;

      void main() {
        gl_FragColor = vec4(0.0, 0.0, 1.0, .25);
      }
    </script>

    <script type="text/javascript">
    var gqGL = null;
    var gqProgram = null;
    function CreateProgramAndContext() {
      // Get the WebGL Context
      var qCanvas = document.querySelector("#idCanvas");
      gqGL = qCanvas.getContext("webgl");

      // Compile the vertex shader
      var sVertexShaderCode = document.querySelector("#idVertexShader").text;
      var qVertexShader = gqGL.createShader(gqGL.VERTEX_SHADER);
      gqGL.shaderSource(qVertexShader, sVertexShaderCode);
      gqGL.compileShader(qVertexShader);

      // Compile the fragment shader
      var sFragmentShaderCode = document.querySelector("#idFragmantShader").text;
      var qFragmentShader = gqGL.createShader(gqGL.FRAGMENT_SHADER);
      gqGL.shaderSource(qFragmentShader, sFragmentShaderCode);
      gqGL.compileShader(qFragmentShader);

      // Compile and link the program
      gqProgram = gqGL.createProgram();
      gqGL.attachShader(gqProgram, qVertexShader);
      gqGL.attachShader(gqProgram, qFragmentShader);
      gqGL.linkProgram(gqProgram);
      gqGL.useProgram(gqProgram);
    }

    function Initialization() {
      CreateProgramAndContext();
      gqGL.clearColor(0.3, 0.3, 0.3, 1.0);
      gqGL.clear(gqGL.COLOR_BUFFER_BIT);

      const kiPointCount = 1000;
      const kiVertexLoc = gqGL.getUniformLocation(gqProgram, 'ufVertexCount');
      gqGL.uniform1f(kiVertexLoc, kiPointCount);

      const faVertexIndices = new Float32Array(kiPointCount);
      faVertexIndices.forEach((v, i) => { faVertexIndices[i] = i; });

      const kiIndexBuffer = gqGL.createBuffer();
      gqGL.bindBuffer(gqGL.ARRAY_BUFFER, kiIndexBuffer);
      gqGL.bufferData(gqGL.ARRAY_BUFFER, faVertexIndices, gqGL.STATIC_DRAW);

      const kiVertexIndicesLoc = gqGL.getAttribLocation(gqProgram, 'afVertIndex');
      // Define how data is taken out of the buffer
      const kiValuesPerIteration = 1;
      const kiValueType = gqGL.FLOAT;
      const kiNormalize = false;  // This may be used on integer types to cast to value between [-1, 1] or [0, 1] for unsigned types
      const kiByteSkipsPerIteration = 0;
      const kiInitialValueOffset = 0;
      gqGL.vertexAttribPointer(kiVertexIndicesLoc, kiValuesPerIteration, kiValueType, kiNormalize, kiByteSkipsPerIteration, kiInitialValueOffset);
      gqGL.enableVertexAttribArray(kiVertexIndicesLoc);

      const kiOffset = 0;
      gqGL.drawArrays(gqGL.POINTS, kiOffset, kiPointCount);
    }
    </script>
  </head>
  <body onload="Initialization()">
    <canvas id="idCanvas" width="400", height="400" style="border:1px solid lightgray"></canvas>
  </body>
</html>

WebGL JavaScript

Drawing an Ellipse

DrawEllipse.html

Output