I'm reading up WebGL from here :
http://learningwebgl.com/blog/?p=1008

The code for that particular lesson is here :
https://github.com/gpjt/webgl-lessons/b ... index.html

The live page is :
http://learningwebgl.com/lessons/lesson09/index.html

In the 1st few lessons the author created an array of vertices of the object he wanted to create (like a square) in the initBuffers() function.
Here is how it was done in an eariler simpler example, where just one object was drawn and not the above one.
Code :
    var triangleVertexPositionBuffer;
    var triangleVertexColorBuffer;
 
    function initBuffers() {
        triangleVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
        var vertices = [
             0.0, 1.0, 0.0,
            -1.0, -1.0, 0.0,
             1.0, -1.0, 0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        triangleVertexPositionBuffer.itemSize = 3;
        triangleVertexPositionBuffer.numItems = 3;
 
        triangleVertexColorBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
        var colors = [
            1.0, 0.0, 0.0, 1.0,
            0.0, 1.0, 0.0, 1.0,
            0.0, 0.0, 1.0, 1.0,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        triangleVertexColorBuffer.itemSize = 4;
        triangleVertexColorBuffer.numItems = 3;
 
    }

This I can understand, beacuse the vertices represent the corners of the triangle to be drawn.

But in this lesson,
Code :
 function initBuffers() {
        starVertexPositionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexPositionBuffer);
        vertices = [
            -1.0, -1.0, 0.0,
             1.0, -1.0, 0.0,
            -1.0, 1.0, 0.0,
             1.0, 1.0, 0.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        starVertexPositionBuffer.itemSize = 3;
        starVertexPositionBuffer.numItems = 4;
 
        starVertexTextureCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, starVertexTextureCoordBuffer);
        var textureCoords = [
            0.0, 0.0,
            1.0, 0.0,
            0.0, 1.0,
            1.0, 1.0
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
        starVertexTextureCoordBuffer.itemSize = 2;
        starVertexTextureCoordBuffer.numItems = 4;
    }

Ignore the textures and assume I just want to draw some plain old 2D shapes.
Now, I fail to see why this line exists:
Code :
 vertices = [
            -1.0, -1.0, 0.0,
             1.0, -1.0, 0.0,
            -1.0, 1.0, 0.0,
             1.0, 1.0, 0.0
        ];

That represents the corners of a square which he never draws.
Stars are drawn actually.

Can someone please clarify this for me?

And a general question,
should we put our vertices in the buffer everytime we draw something?
I mean if I were to draw 10 squares in different fixed points on the canvas,
should I put those coordinates into the buffer for each and every object?
In this tutorial, that isn't done.
Please help.