$*$Computer Graphics

When the user clicks with the left button, a small pentagon with a random color appears where s$/$he clicked. Each click adds a new pentagon, with the previous ones remaining

Why is the pentagon not appearing on the canvas even thought the handleMouseClick function is working

pentagon.js

class Pentagon$2$D $\{$

static vertexPositions $=[]$;

static vertexColors $=[]$;

static shaderProgram $=-1$;

static positionBuffer $=-1$;

static colorBuffer $=-1$;

static aPositionShader $=-1$;

static aColorShader $=-1$;

static initialize$()\{$

$//$ Similar to Ellipse$2$D$.$initialize, initialize shader program, buffers, and attribute locations

Pentagon$2$D$.$shaderProgram $=$ initShaders$($gl$,"/$vshader$.$glsl$","/$fshader$.$glsl$")$;

$//$ Define vertices for a pentagon and assign random colors

const side $=0\mathrm{.}1$;

const goldenRatio $=1\mathrm{.}6180339887$;

const angleOffset $=$ Math.PI $/2$;

for $($let i $=0$; i $<mtext\; id="EditorElement\_459609"></mtext><mn\; id="EditorElement\_459610">5</mn>$; i$++)\{$

const angle $=$ angleOffset $+($i $*2*$ Math.PI$)/5$;

const x $=$ Math.cos$($angle$)*$ side;

const y $=$ Math.sin$($angle$)*$ side;

const red $=$ Math.random$()$;

const green $=$ Math.random$()$;

const blue $=$ Math.random$()$;

Pentagon$2$D$.$vertexPositions.push$($vec$2($x$,$ y$))$;

Pentagon$2$D$.$vertexColors.push$($vec$3($red$,$ green, blue$))$;

$\}$

Pentagon$2$D$.$positionBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Pentagon$2$D$.$positionBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($Pentagon$2$D$.$vertexPositions$),$ gl$.$STATIC$\_$DRAW$)$;

Pentagon$2$D$.$colorBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Pentagon$2$D$.$colorBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($Pentagon$2$D$.$vertexColors$),$ gl$.$STATIC$\_$DRAW$)$;

Pentagon$2$D$.$aPositionShader $=$ gl$.$getAttribLocation$($Pentagon$2$D$.$shaderProgram, "aPosition"$)$;

Pentagon$2$D$.$aColorShader $=$ gl$.$getAttribLocation$($Pentagon$2$D$.$shaderProgram, "aColor"$)$;

$\}$

constructor$($x$,$ y$)\{$

if $($Pentagon$2$D$.$shaderProgram $===-1)$ Pentagon$2$D$.$initialize$()$;

this.translate$($x$,$ y$)$;

$\}$

translate$($x$,$ y$)\{$

for $($let i $=0$; i $$ Pentagon$2$D$.$vertexPositions.length; i$++)\{$

const position $=$ Pentagon$2$D$.$vertexPositions$[$i$]$;

position$[0]+=$ x;

position$[1]+=$ y;

$\}$

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Pentagon$2$D$.$positionBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($Pentagon$2$D$.$vertexPositions$),$ gl$.$STATIC$\_$DRAW$)$;

$\}$

draw$()\{$

gl$.$useProgram$($Pentagon$2$D$.$shaderProgram$)$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Pentagon$2$D$.$positionBuffer$)$;

gl$.$vertexAttribPointer$($Pentagon$2$D$.$aPositionShader, $2,$ gl$.$FLOAT, false, $0,0)$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, Pentagon$2$D$.$colorBuffer$)$;

gl$.$vertexAttribPointer$($Pentagon$2$D$.$aColorShader, $3,$ gl$.$FLOAT, false, $0,0)$;

gl$.$enableVertexAttribArray$($Pentagon$2$D$.$aPositionShader$)$;

gl$.$enableVertexAttribArray$($Pentagon$2$D$.$aColorShader$)$;

gl$.$drawArrays$($gl$.$TRIANGLE$\_$FAN, $0,$ Pentagon$2$D$.$vertexPositions.length$)$;

gl$.$disableVertexAttribArray$($Pentagon$2$D$.$aPositionShader$)$;

gl$.$disableVertexAttribArray$($Pentagon$2$D$.$aColorShader$)$;

$\}$

$\}$

app.js

var canvas;

var gl;

var sq;

var sq$2$;

var sq$3$;

var sq$4$;

var sq$5$;

var sq$6$;

var triangle;

var circle;

var ellipse;

var pentagons $=[]$;

window.onload $=$ function init$()\{$

canvas $=$ document.getElementById$("$gl$-$canvas"$)$;

gl $=$ canvas.getContext$(\text{'}$webgl$2\text{'})$;

if $(!$gl$)\{$ alert$("$WebGL $2\mathrm{.}0$ isn't available"$)$; $\}$

gl$.$viewport$(0,0,$ canvas.width, canvas.height$)$;

gl$.$clearColor$(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0)$;

document.addEventListener$(\text{'}$keydown$\text{'},$ handleKeyDown$)$;

canvas.addEventListener$(\text{'}$click$\text{'},$ handleMouseClick$)$;

sq $=$ new Square$()$;

sq$2=$ new Square$2()$;

sq$3=$ new Square$3()$;

sq$4=$ new Square$4()$;

sq$5=$ new Square$5()$;

sq$6=$ new Square$6()$;

triangle $=$ new Triangle$2$D$()$;

circle $=$ new Circle$2$D$()$;

ellipse $=$ new Ellipse$2$D$()$;

$//$ Render the initial scene

render$()$;

$\}$;

function render$()\{$

gl$.$clear$($gl$.$COLOR$\_$BUFFER$\_$BIT$)$;

sq$.$draw$()$;

sq$2.$draw$()$;

sq$3.$draw$()$;

sq$4.$draw$()$;

sq$5.$draw$()$;

sq$6.$draw$()$;

triangle.draw$()$;

circle.draw$()$;

ellipse.draw$()$;

$\}$

function handleMouseClick$($event$)\{$

const rect $=$ canvas.getBoundingClientRect$()$;

const x $=$ event.clientX $-$ rect.left;

const y $=$ canvas.height $-($event$.$clientY $-$ rect.top$)$;

console.log$(\text{'}$Mouse click at:$\text{'},$ x$,$ y$)$;

$//$ Create a new pentagon with a random color at the clicked position

const newPentagon $=$ new Pentagon$2$D$($x $/$ canvas.width $*2-1,$ y $/$ canvas.height $*2-1)$;

pentagons.push$($newPentagon$)$;

render$()$;

$\}$

$$