title: WebGL wrong drawing order for the OpenGL shapes
body: <p>I wanted to test something using WebGL(OpenGL for the browser) and I wrote simple js code that is drawing LINES and POINTS. So I have the function draw() that is drawing multiple shapes, first it draws multiple Lines and after that multiple Circles(represented as squares). But it so happens that the lines are drawn above the circles, as if the drawing order is inverted. Any idea why??</p>
  <pre><code>drawShapes(gl.LINES, { r: 1.0, g: 0.0, b: 0.0, a: 1.0 })
  drawShapes(gl.POINTS, { r: 0.0, g: 1.0, b: 0.0, a: 1.0 })
  </code></pre>
  <p><a href="https://i.stack.imgur.com/PggiD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PggiD.png" alt="enter image description here" /></a></p>
  <p>Below is the full source code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let canvas = document.getElementById('canvas');
          let gl = canvas.getContext('webgl');
  
          let vertices = [
              -0.7, -0.1, 0,
              -0.3, 0.6, 0,
              -0.3, -0.3, 0,
              0.2, 0.6, 0,
              0.3, -0.3, 0,
              0.7, 0.6, 0
          ]
  
          function drawShapes(shape, color) {
  
              // Create an empty buffer object
              let vertex_buffer = gl.createBuffer()
              gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer)
              gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
              gl.bindBuffer(gl.ARRAY_BUFFER, null)
  
              // Vertex shader source code
              let vertCode = `
              attribute vec3 coordinates;
              void main(void) {
                  gl_Position = vec4(coordinates, 1.0);
                  gl_PointSize = 10.0;
              }`
  
              // Create a vertex shader object
              let vertShader = gl.createShader(gl.VERTEX_SHADER)
              gl.shaderSource(vertShader, vertCode)
              gl.compileShader(vertShader)
              let fragCode = `
              void main(void) { 
                  gl_FragColor = vec4(${color.r}, ${color.g}, ${color.b}, ${color.a});
              }`
  
              let fragShader = gl.createShader(gl.FRAGMENT_SHADER)
              gl.shaderSource(fragShader, fragCode)
              gl.compileShader(fragShader)
  
              let shaderProgram = gl.createProgram()
              gl.attachShader(shaderProgram, vertShader)
              gl.attachShader(shaderProgram, fragShader)
  
              gl.linkProgram(shaderProgram)
              gl.useProgram(shaderProgram)
              gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer)
  
              // Get the attribute location
              let coord = gl.getAttribLocation(shaderProgram, "coordinates")
              gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0)
              gl.enableVertexAttribArray(coord)
  
  
              gl.enable(gl.DEPTH_TEST)
              gl.viewport(0, 0, canvas.width, canvas.height)
              gl.drawArrays(shape, 0, 6)
          }
  
          function draw(shape, color) {
  
              // change background color
              gl.clearColor(0, 0, 0, 0.7)
              gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  
              drawShapes(gl.LINES, { r: 1.0, g: 0.0, b: 0.0, a: 1.0 })
              drawShapes(gl.POINTS, { r: 0.0, g: 1.0, b: 0.0, a: 1.0 })
          }
          draw()</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
      &lt;canvas width="500" height="500" id="canvas"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>