WebGL draws a 10px-size point

The WEBGL program uses both HTML and JavaScript on the screen to create and display three-dimensional graphics. The newly introduced <canvas> element tag in WebGL, which defines the drawing area on a Web page.

Because the <canvas> element is flexible enough to support both dimensional and three-dimensional graphics, it does not directly provide a drawing method, but rather provides a mechanism called context to draw. We get this context first.

Get the WebGL drawing context
var gl = getwebglcontext (canvas, true);

Getwebglcontext (element, [debug]);

Gets the WebGL drawing context, or if the Debug property is turned on, an error message is displayed in the console when an error is encountered. Parameters:

	element	specify canvas label
 	debug
return value
 	null	webgl not available

&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;WEBGL draw a 10px-size point: 

/*** * 1. Draw a rectangle */function main () {//Get <canvas> tag var canvas = document.getElementById ("MyCanvas");    Gets the WebGL drawing context var gl = Getwebglcontext (canvas, true); If the browser does not support WebGL then prompt for error if (!GL) {console.log ("Please use a higher version of the browser!")        ");    Return    } console.log (GL);    Specifies the color of the clear color buffer, the range of values for each component 0-1 Gl.clearcolor (0.5, 1, 1, 1); Clears the color buffer gl.clear (GL) with the specified color. Color_buffer_bit);} /*** * 1. Draw a point *///vertex shader program var vshader_source = "void main () {\ n" +//Set coordinates "gl_position = VEC4 (0.0, 0.0, 0.0, 1.0); \ N "+//Set size" Gl_pointsize = 10.0;\n "+"}\n ";//Element shader var fshader_source =" void main () {\ n "+//Set color" Gl_ Fragcolor = VEC4 (1.0, 0.0, 0.0, 1.0); \ n "+"}\n "; function main () {//Get <canvas> tag var canvas = Document.gete    Lementbyid ("MyCanvas");    Gets the WebGL drawing context var gl = Getwebglcontext (canvas, true); If the browser does not support WebGL then prompt for error if (!GL) {console.log ("Please use a higher version of the browser!")        ");    Return } console.log (Initshaders (GL, Vshader_source, Fshader_souRCE)); Initialize shader if (!initshaders (GL, Vshader_source, Fshader_source)) {Console.log ("Shader initialization failed!")        ");    Return    }//settings <canvas> background color gl.clearcolor (0.0, 0.0, 0.0, 1.0);     Empty <canvas>/*** * gl.clear (); function inherits from OpenGL ();     * It is based on a multi-base buffer model and is more complex than a two-dimensional drawing context.     * Clear the plot area, actually in the empty color buffer through the specified color to erase the already drawn content. * Pass GL.     The Color_buffer_bit parameter is to tell WebGL to empty the color buffer.     * If no color is specified before the function is used, the default is Rgba (0,0,0,0); as a clear color.     * This color is completely transparent, the result of the replacement is not what color, displayed as the color of the browser itself. * * */gl.clear (GL.    Color_buffer_bit);     Draw a Point/*** * drawarrays (mode, first, count); * Mode: Specifies how the drawing is to receive the following constant symbols: * POINTS LINES line_strip line_loop triangles triangles_strip Triangles_fan * First: Specify from which Vertices begin to draw an integer * Count: Specifies how many vertex integral types are required for drawing * return value: NO * ERROR: * Invalid_enum: Incoming mode parameter is not one of the pre-order parameters * Invalid_value: Parameter fi RST or count is a negative number */Gl.drawarrays (GL. POINTS, 0, 1);}

WebGL Draws a 10px-sized point