title: Draw lines in different colors using WebGL
body: <p>I am trying to plot points and hence connect these points using</p>
  
  <pre><code> gl.drawArrays(gl.LINE_STRIP, 0, points.length);
  </code></pre>
  
  <p>Connecting these points together would give me a full shape, a polygon maybe. The problem is for the points plotted, the lines are broken. I understand the difference between gl.LINES and gl.LINE_STRIP; using the latter would finish off the polygonal shape by connecting all of the vertices lying next to each other. </p>
  
  <p>I somehow think that using gl.LINES would be the best option, because using gl.LINE_STRIP not only connects the vertices(points) together but also connects the end point of one shape with the start point of the next shape (since it draws lines between 2 adjacent points). I would certainly not want that and would want to draw individual shapes.</p>
  
  <p>Secondly, I tried using index buffers. This did not work out too, because my code would not know how many vertices are needed for each shape before hand(since each shape is a haphazard shape). </p>
  
  <p>I would want to draw many such shapes in a single draw() call. So my best guess is  to use a single drawArray() call that uses gl.LINE_STRIP and say that for each shape, draw the shape in an opaque color and for the line that connects the end point of the first shape to the start point of the next shape, make it transparent colored. This way, I would get individual shapes drawn. But I am confused to make this work. How would I tell that the shapes have a different color and the extra lines have a different color?</p>
  
  <p>Here is an excerpt from my code:</p>
  
  <pre><code>buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
  
  // enable the 'points' attribute in the shader to receive buffer
  var attributeLoc = gl.getAttribLocation(pointProgram, 'points');
  gl.enableVertexAttribArray(attributeLoc);
  
  // tell webgl how buffer is laid out (pairs of x,y coords)
  gl.vertexAttribPointer(attributeLoc, 2, gl.FLOAT, false, 0, 0);
  </code></pre>
  
  <p>The remaining shader linking and compiling is the same boiler-plate code.</p>
  
  <p>My drawArrays() looks like this:</p>
  
  <pre><code> gl.lineWidth(7);
   gl.drawArrays(gl.LINE_STRIP, 0, points.length); 
  </code></pre>
  
  <p>I tried using a color buffer like this:</p>
  
  <pre><code>  var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    var colors = [0.0, 0.0, 0.0, 1.0, //this is for the shapes
                  0.0, 0.0, 0.0, 0.3]; //this is for the extra lines, to make them transparent
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
  
   var aVertexColor = gl.getAttribLocation(pointProgram, "aVertexColor");
   gl.enableVertexAttribArray(aVertexColor);
   gl.vertexAttribPointer(aVertexColor, 2, gl.FLOAT, false, 0, 0);
  </code></pre>
  
  <p>This did not somehow seem to work. Where am I going wrong?</p>