[WebGL] Setting Up WebGL

In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Setup</title>

</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script src="./mian.js"></script>
</body>
</html>

var gl;

initGL();
draw();

function initGL(){
    var canvas = document.getElementById("canvas");
    gl = canvas.getContext("webgl");

    gl.viewport(0,0,canvas.width, canvas.height);
    gl.clearColor(1,0,0,1); //red, blue, green, alpha
}

function draw(){
    gl.clear(gl.COLOR_BUFFER_BIT); //Paint the color to the canvas
}