title: why is the second point displayed in the wrong place?
body: <p>I am trying to write a function to draw a triangle (it's in main() now). everything works - everything is cool, but I added the execution of two functions for drawing point ( drawPoint()) and the point that is drawn after the triangle is displayed in the wrong place, why?</p>
  <p>index.html :</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;
      the rgb
      &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body onload=&quot;main()&quot;&gt;
  &lt;canvas id=&quot;webgl&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;
  PLZ USE BROWSER SUPPORTING CANVAS
  &lt;/canvas&gt;
  
  &lt;script src=&quot;../lib/webgl-utils.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../lib/webgl-debug.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../lib/cuon-utils.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;thergb.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>thergb.js:</p>
  <pre><code>var canvas = document.getElementById('webgl');
  var gl = getWebGLContext(canvas);
  
  function main()
  {
      
      clearCanvas('green');
      drawPoint(0.3,0.0,50.0,'blue'); //draw point before triangle
      
      //draw triangle
      var VSHADER_SOURCE=
          'attribute vec4 a_Position;\n'+
          'void main() {\n' +
          ' gl_Position = a_Position;\n'+
          '}\n';
      var FSHADER_SOURCE=
          'void main() {\n' +
          ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
          '}\n';
      if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
          {
              return;
          }
  
      var n = initVertexBuffers(gl);
      gl.drawArrays(gl.TRIANGLES, 0, n);
  
      drawPoint(0.4,0.0,50.0,'red'); //draw point after triangle
  
      
      
  
  }
  function initVertexBuffers(gl) {
    var vertices = new Float32Array([
      0, 0.5,   -0.5, -0.5,   0.5, -0.5
    ]);
    var n = 3; // The number of vertices
  
    // Create a buffer object
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
      console.log('Failed to create the buffer object');
      return -1;
    }
  
    // Bind the buffer object to target
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    // Write date into the buffer object
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position &lt; 0) {
      console.log('Failed to get the storage location of a_Position');
      return -1;
    }
    // Assign the buffer object to a_Position variable
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  
    // Enable the assignment to a_Position variable
    gl.enableVertexAttribArray(a_Position);
  
    return n;
  }
  function drawPoint(x,y,size,color)
  {
      var VSHADER_SOURCE=
          'attribute vec4 a_Position;\n'+
          'attribute float a_PointSize;\n'+
          'void main() {\n' +
          ' gl_Position = a_Position;\n'+
          ' gl_PointSize = a_PointSize;\n'+
          '}\n';      
  
      if (color == 'red')
      {
          var FSHADER_SOURCE=
          'void main() {\n' +
          ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
          '}\n';
      }
      if (color == 'green')
      {
          var FSHADER_SOURCE=
          'void main() {\n' +
          ' gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n'+
          '}\n';
      }
      if (color == 'blue')
      {
          var FSHADER_SOURCE=
          'void main() {\n' +
          ' gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n'+
          '}\n';      
      }
  
      if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
          {
              return;
          }
      var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
      var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
      gl.vertexAttrib3f(a_Position,x,y,0.0);
      gl.vertexAttrib1f(a_PointSize, size);
      gl.drawArrays(gl.POINTS, 0,1);
  }
  
  function clearCanvas(color)
  {
      if (color == 'red')
      {
          gl.clearColor( 1.0, 0.0, 0.0, 1.0);
      }
      if (color == 'green')
      {
          gl.clearColor( 0.0, 1.0, 0.0, 1.0);
      }
      if (color == 'blue')
      {
          gl.clearColor( 0.0, 0.0, 1.0, 1.0);
      }
      gl.clear(gl.COLOR_BUFFER_BIT);
  }
  </code></pre>
  <p>additional libraries are on my github: <a href="https://github.com/bazylevnik0/thergb" rel="nofollow noreferrer">https://github.com/bazylevnik0/thergb</a></p>