MENU


Display Regions

viewport(x, y, width, height) scales the entire resultant image onto the specified region of the canvas, transforming the image from device coordinates to window coordinates.

scissor (x,y,width,height) cuts away the region that falls outside the specified region on the canvas, leaving the cutaway region in the background color.(x,y) is a pair of integers that denotes the lower-left corner of the region. By default, 'width' and 'height' are the width and height of the canvas in integers. scissor() is performed after all the viewport() operations.


RESETRUNFULL
<!DOCTYPE html><html>
<head>
<script src="/shared/webgl-library.js"></script>
<script>
var VS_SOURCE=`
   attribute vec4 p;
   attribute vec4 c;
   varying vec4 c2;
   void main(){
      c2=c;
      gl_Position = p; 
   }`;
var FS_SOURCE=`
   precision mediump float;
   varying vec4 c2;
   void main(){
      gl_FragColor=c2;
   }`;
var gl,m,mL;
function start(){
   var canvas = document.getElementById("myCanvas");
   gl = canvas.getContext("webgl");
   initShaders(gl,VS_SOURCE,FS_SOURCE);
   var points=new Array();
   var vc= new Float32Array([ 0.0,-0.5,   1.0, 0.0, 0.0,
                             -0.5, 0.5,   0.0, 1.0, 0.0,
                              0.5, 0.5,   0.0, 0.0, 1.0]);
   var ESIZE=vc.BYTES_PER_ELEMENT;
   var b=gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, b);
   gl.bufferData(gl.ARRAY_BUFFER, vc, gl.STATIC_DRAW);
   pL=gl.getAttribLocation(gl.program, 'p');
   gl.vertexAttribPointer(pL, 2, gl.FLOAT, false, ESIZE*5, 0);
   gl.enableVertexAttribArray(pL);
   cL=gl.getAttribLocation(gl.program, 'c');
   gl.vertexAttribPointer(cL, 3, gl.FLOAT, false, ESIZE*5, ESIZE*2);
   gl.enableVertexAttribArray(cL);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.enable(gl.SCISSOR_TEST);
   gl.scissor(0, 0, 500, 250);
   gl.viewport(0, 0, 250, 500);   // scales to left half of the canvas
   gl.drawArrays(gl.TRIANGLES, 0, 3);
   gl.viewport(250, 0, 250, 500);   // scales to right half of the canvas
   gl.drawArrays(gl.TRIANGLES, 0, 3);
}</script>
</head>
<body onload="start()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

enable(capability) enables a capability.
disable(capability) disables a capability.
isEnabled(capability) returns true if a capability is enabled.

'capability' can be:
BLEND,
CULL_FACE,
DEPTH_TEST,
DITHER,
POLYGON_OFFSET_FILL,
SAMPLE_ALPHA_TO_COVERAGE,
SAMPLE_COVERAGE,
SCISSOR_TEST,
STENCIL_TEST

By default, all capabilities are disabled to speed up drawing.