Below I have put my code to create a dynamic triangle in javascript, run in a html file on google chrome. This code allows me to click on the canvas on three different locations and dynamically create a triangle where I wish.

From this code I now have to create a dynamic circle in the same such manner. For the circle, select the center of the circle and then select a second point to specify the radius (Again creating a temporary circle to show the user where it would be).

1. If the circle is filled, you can use triangle fan to fill it.
2. However, you will only want to use triangle fan on circle.

If I could get some help creating the circle I would highly appreciate it. Thanks!

class TriangleDynamic { constructor() { this.isFinished = false; this.numPoints = 0; //initiate vertices //load buffers ONLY HERE this.positions = []; //create a position buffer this.positionBuffer = gl.createBuffer(); //bind ARRAY_BUFFER type to the positionBuffer gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); //load the points gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.positions), gl.STATIC_DRAW); } addPoint(x, y)// I could send in my color { this.positions.push(x) this.positions.push(y) this.positions.push(0) this.positions.push(0) this.positions.push(0) this.positions.push(1) gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); //load the points gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.positions), gl.STATIC_DRAW); this.numPoints += 1 if (this.numPoints == 3) { this.isFinished = true; } } draw(program) { //bind the correct buffers //set attributes properties //draw shape gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); var positionAttributeLocation = gl.getAttribLocation(program, "a_position"); //now we have to specify how to read our vertices gl.enableVertexAttribArray(positionAttributeLocation); //this will represent a shape. we only want to use buffer data once per shape //three 2d points //tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 3; //2 components per iteration var type = gl.FLOAT; //the data is 32 bit floats var normalize = false; //dont normalize the data var stride = 6*Float32Array.BYTES_PER_ELEMENT; //0=move forward size * sizeof(type) each iteration var offset = 0; //start at the beginning of the buffer gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset) var colorAttributeLocation = gl.getAttribLocation(program, "a_color"); //now we have to specify how to read our vertices gl.enableVertexAttribArray(colorAttributeLocation); //this will represent a shape. we only want to use buffer data once per shape //three 2d points //tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER) size = 3; //2 components per iteration type = gl.FLOAT; //the data is 32 bit floats normalize = false; //dont normalize the data stride = 6*Float32Array.BYTES_PER_ELEMENT;//0=move forward size * sizeof(type) each iteration offset = 3*Float32Array.BYTES_PER_ELEMENT; //start at the beginning of the buffer gl.vertexAttribPointer(colorAttributeLocation, size, type, normalize, stride, offset)

if(this.isFinished) { var primitiveType = gl.TRIANGLES; var offset = 0; var count = this.numPoints; gl.drawArrays(primitiveType, offset, count); } else { var primitiveType = gl.LINE_STRIP var offset = 0; gl.drawArrays(primitiveType, offset, this.numPoints); } } update() { } }