A Simple Scissor Example

This JavaScript program demonstrates how to draw rectangle by using a scissor test in WebGL.

ScissorExample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>XoaX.net's WebGL</title>
  </head>
  <style>
    #idCanvas {
    	border: 1px solid black;
    	width: 800px;
    	height: 600px
    }
  </style>
  <script type="text/javascript" src="ScissorExample.js"></script>
  <body onload="render()">
    <canvas id="idCanvas"></canvas>
  </body>
</html>

ScissorExample.js

function render() {
	const qCanvas = document.getElementById("idCanvas");
	
	qCanvas.width = qCanvas.clientWidth;
	qCanvas.height = qCanvas.clientHeight;
	
	const kqGL = qCanvas.getContext("webgl");
	kqGL.viewport(0, 0, kqGL.drawingBufferWidth, kqGL.drawingBufferHeight);
	
	// The rectangle from (40, 10) to (440, 110).
	kqGL.enable(kqGL.SCISSOR_TEST);
	kqGL.scissor(40, 10, 400, 100);
	
	// The clear color is dark purple.
	kqGL.clearColor(0.3, 0.0, 0.6, 1.0);
	kqGL.clear(kqGL.COLOR_BUFFER_BIT);
}

WebGL JavaScript

A Simple Scissor Example

ScissorExample.html

ScissorExample.js

Output