I am using webGL and javascript for graphics and we are just learning so this is very basic, but my code keeps throwing the error that gl is not defined. I am going to put below my javascript code and following will be my html. I was running on chrome browser and I cannot find the issue. Thank you.

------------------------------------------------------------------------

js file

----------------------------------------------------------------------

var EOL= " " var VSHADER = 'attribute vec4(a_Position);' 'void main(){'+ EOL+'gl_Position = a_Position'+ EOL + '}'+EOL;

var FSHADER = 'attribute vec4(a_Position);' 'void main(){'+ EOL+'gl_Position = a_Position'+ EOL + '}'+EOL; gl_PointSize = 4.0; glFragColor = 'vec4(1.0,0.0,0.0,1.0);'

function canvas_webGL(){ let canvas = document.querySelector("#canvas_gl"); let gl= canvas.getContext("webgl"); gl.clearColor(1.0,0.0,0.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); }

/*function canvas_init2D() { let canvas = document.querySelector("#canvas_gl"); let ctx = canvas.getContext("2d"); for (let i=0; i<255; ++i) { let x = Math.random() * 640; let y = Math.random() * 480; let r = Math.random() * 255; let g = 255; ctx.fillStyle = "rgba(" + r.toString() + ", " + g.toString() + ", 0, 255)"; ctx.fillRect(x,y,10,10); } }*/

function main() { console.log("WebGL - lab1"); if(!initShaders(gl,VSHADER, FSHADER)) { cosole.log("Failed to initialize shaders"); } //canvas_init2D(); }

-------------------------------------

html file

--------------------------------------