使用javascript和html应用多个视口

所以我要上一堂计算机图形学课，我们正在学习如何使用多个视口。我的教授给这个类的伪代码只使用了一个视口，它生成了一个看起来像从瓶子里出来的精灵的东西。下面是它的外观：

现在进入代码：

var gl;
var points; 
var vertices =[]; 
var size = 0.25; 

window.onload = function init(){ 
var canvas = document.getElementById( "gl-canvas" );
gl=WebGLUtils.setupWebGL(canvas); 
//For debugging 
gl = WebGLDebugUtils.makeDebugContext( canvas.getContext("webgl")); 

if (!gl ){ 
    alert( "WebGL isn't available" ); 
}

gl.viewport(0,0, canvas.width, canvas.height); // <----- pay attention to this
gl.clearColor(0.0,0.0,0.0,1.0);
//Load shaders and initialize attribute buffers

var program = initShaders( gl, "vertex-shader", "fragment-shader" ); 
gl.useProgram( program );

//Manufacture the genie points in the array vertices by calling function

genie(size);

//Load the data into the GPU

var bufferId = gl.createBuffer(); 
gl.bindBuffer( gl.ARRAY_BUFFER , bufferId );
gl.bufferData( gl.ARRAY_BUFFER , flatten(vertices), gl.STATIC_DRAW );

//Associate our shader variables with our data buffer
var vPosition = gl.getAttribLocation( program , "vPosition" );
gl.vertexAttribPointer(vPosition ,2, gl.FLOAT , false ,0,0); 
gl.enableVertexAttribArray( vPosition ); 
render();
};

function genie(size){
const NUM =300; 
var i, fact , fact_now , fact7 , fact8;
fact =(2* Math.PI)/ NUM;
for (i =0; i < NUM; ++i){ 
    fact_now = fact * i;
    fact7 = fact_now * 7;
    fact8 = fact_now * 8; 
    vertices.push( vec2(size * (Math.cos(fact_now) + Math.sin(fact8)), 
                        size * (2.0* Math.sin(fact_now) + Math.sin(fact7))));
}
};

function render(){
 gl.clear( gl.COLOR_BUFFER_BIT );
 gl.drawArrays( gl.LINE_LOOP , 0, vertices.length );
}

在具有多个视口的示例中，伪代码类似，但是一个很大的区别是对gl.viewport的调用从函数init移动到了渲染函数

我尝试在firefox上运行第二个版本的伪代码。当我检查表示SCRIPT5009:SCRIPT5009:“canvas”未定义的元素时，会得到一个空白页和一个错误

如果有人知道我做错了什么，请告诉我

这里是html文件，如果你想玩它

//GLSLvertexshadercode 属性向量4位置； 空主{ gl_位置=V位置； gl_PointSize=6.0； } //GLSLfragmentshadercode 精密中泵浮子； 空主{ gl_FragColor=vec41.0,1.0,1.0,1.0； } 哎呀。。。您的浏览器不支持HTML5画布元素

var gl;
var points; 
var vertices =[]; 
var size = 0.25; 

window.onload = function init(){ 
var canvas = document.getElementById( "gl-canvas" );
gl=WebGLUtils.setupWebGL(canvas); 
//For debugging 
gl = WebGLDebugUtils.makeDebugContext( canvas.getContext("webgl")); 

if (!gl ){ 
    alert( "WebGL isn't available" ); 
}

// <----------------- this line of code gets moved to render function
gl.clearColor(0.0,0.0,0.0,1.0);
//Load shaders and initialize attribute buffers

var program = initShaders( gl, "vertex-shader", "fragment-shader" ); 
gl.useProgram( program );

//Manufacture the genie points in the array vertices by calling function

genie(size);

//Load the data into the GPU

var bufferId = gl.createBuffer(); 
gl.bindBuffer( gl.ARRAY_BUFFER , bufferId );
gl.bufferData( gl.ARRAY_BUFFER , flatten(vertices), gl.STATIC_DRAW );

//Associate our shader variables with our data buffer
var vPosition = gl.getAttribLocation( program , "vPosition" );
gl.vertexAttribPointer(vPosition ,2, gl.FLOAT , false ,0,0); 
gl.enableVertexAttribArray( vPosition ); 
render();
};

function genie(size){
const NUM =300; 
var i, fact , fact_now , fact7 , fact8;
fact =(2* Math.PI)/ NUM;
for (i =0; i < NUM; ++i){ 
    fact_now = fact * i;
    fact7 = fact_now * 7;
    fact8 = fact_now * 8; 
    vertices.push( vec2(size * (Math.cos(fact_now) + Math.sin(fact8)), 
                        size * (2.0* Math.sin(fact_now) + Math.sin(fact7))));
}
};

function render(){
 gl.viewport(0,0, canvas.width/2, canvas.height/2); // <---- first viewport
 gl.clear( gl.COLOR_BUFFER_BIT );
 gl.drawArrays( gl.LINE_LOOP , 0, vertices.length );

 //establishes a second viewport
 gl.viewport( canvas.width/2, canvas.height/2, canvas.width/2, canvas.height/2);
 gl.drawArrays( gl.LINE_LOOP ,0, vertices.length );  // <-- draws a second genie
}