如何在画布元素上应用染色(Context- webgl)

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

// 创建顶点着色器
var vertexShaderSource = `
    // 顶点着色器代码
`;

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建片元着色器
var fragmentShaderSource = `
    // 片元着色器代码
`;

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 创建缓冲区对象
var vertexBuffer = gl.createBuffer();

// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 设置顶点数据
var vertices = [
    // 顶点坐标数据
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 获取顶点着色器中的属性变量位置
var positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_position');

// 启用顶点属性数组
gl.enableVertexAttribArray(positionAttributeLocation);

// 将缓冲区对象分配给属性变量
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 清空画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制图形
gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);