WebGL程序在屏幕上同時使用HTML和javascript來創建和顯示三維圖形。WebGL中新引入的<canvas>元素標簽，它定義了網頁上的繪圖區域。

//獲取WebGL繪圖上下文
var gl = getWebGLContext(canvas, true);

getWebGLContext(element, [debug]);

/***
 * 1.畫一個矩形
 */
function main() {
    //獲取<canvas>標簽
    var canvas = document.getElementById("myCanvas");
    //獲取WebGL繪圖上下文
    var gl = getWebGLContext(canvas, true);
    //如果瀏覽器不支持WebGL則提示錯誤
    if(!gl){
        console.log("請使用高版本的瀏覽器！");
        return;
    }
    console.log(gl);
    //指定清除顏色緩沖區的顏色,每個分量的取值範圍0-1
    gl.clearColor(0.5, 1, 1, 1);
    //用指定的顏色清除顏色緩沖區
    gl.clear(gl.COLOR_BUFFER_BIT);
}

/***
 * 1.畫一個點
 */
//頂點著色器程序
var VSHADER_SOURCE =
    "void main(){\n" +
    //設置坐標
    "gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n" +
    //設置尺寸
    "gl_PointSize = 10.0;\n" +
    "}\n";
//片元著色器
var FSHADER_SOURCE =
    "void main() {\n" +
    //設置顏色
    "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n" +
    "}\n";
function main(){
    //獲取<canvas>標簽
    var canvas = document.getElementById("myCanvas");
    //獲取WebGL繪圖上下文
    var gl = getWebGLContext(canvas, true);
    //如果瀏覽器不支持WebGL則提示錯誤
    if(!gl){
        console.log("請使用高版本的瀏覽器！");
        return;
    }
    console.log(initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE));
    //初始化著色器
    if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
        console.log("著色器初始化失敗！");
        return;
    }
    //設置<canvas>的背景色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    //清空<canvas>
    /***
     * gl.clear();函數繼承自OpenGL();
     * 它基於多基本緩沖區模型,比二維繪圖上下文復雜的多。
     * 清空繪圖區，實際上是在清空顏色緩沖區 通過指定的顏色去擦除已經繪制的內容。
     * 傳遞 gl.COLOR_BUFFER_BIT參數就是在告訴WebGL清空顏色緩沖區。
     * 如果在使用該函數之前沒有指定任何顏色，那麽默認會rgba(0,0,0,0);作為清除顏色。
     * 這個顏色是全透明的，替換出來的結果就是什麽顏色都沒有，顯示為瀏覽器本身的顏色。
     * 
     */
    gl.clear(gl.COLOR_BUFFER_BIT);
    //繪制一個點
    /***
     * drawArrays(mode, first, count);
     * mode:指定繪圖的方式，可接收以下常量符號:
     * POINTS LINES LINE_STRIP LINE_LOOP TRIANGLES TRIANGLES_STRIP TRIANGLES_FAN
     * first:指定從哪個頂點開始繪制 整型
     * count:指定繪制需要用到多少個頂點 整型
     * 返回值:無
     * 錯誤:
     * INVALID_ENUM:傳入mode參數不是前序參數之一
     * INVALID_VALUE:參數first或count是負數
     */
    gl.drawArrays(gl.POINTS, 0, 1);
}

WebGL畫一個10px大小的點