A Simple Mask Example

This JavaScript program demonstrates how to with an applied color mask test in WebGL. The left side is colored gray and the right side colored with the same color with a red mask applied so that it appears red.

MaskExample.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="MaskExample.js"></script>
  <body onload="render()">
    <canvas id="idCanvas"></canvas>
  </body>
</html>

MaskExample.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 (0, 0) to (400, 600).
	kqGL.enable(kqGL.SCISSOR_TEST);
	kqGL.scissor(0, 0, 400, 600);
	
	// The clear color is gray. We restrict drawing to the left side.
	kqGL.clearColor(0.6, 0.6, 0.6, 1.0);
	kqGL.clear(kqGL.COLOR_BUFFER_BIT);
	
	// Set the color mask to only show the right side only
	kqGL.colorMask(true, false, false, true);
	// The rectangle from (400, 0) to (800, 600).
	kqGL.scissor(400, 0, 400, 600);
	
	// The clear color is gray, but the mask makes it red.
	kqGL.clear(kqGL.COLOR_BUFFER_BIT);
}

WebGL JavaScript

A Simple Mask Example

MaskExample.html

MaskExample.js

Output