Drawing Rectangles With Scissor Tests.

This JavaScript WebGL program demonstrates how to draw rectangles with scissor tests without shaders.

DrawingRectanglesWithScissorTests.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>
    <script type="text/javascript">
    function Render() {
      // Get the WebGL Context
      var qCanvas = document.querySelector("#idCanvas");
      var qGL = qCanvas.getContext("webgl");
      qGL.clearColor(.95, .95, .95, 1.0);
      qGL.clear(qGL.COLOR_BUFFER_BIT);
      qGL.enable(qGL.SCISSOR_TEST);
      for (let i = 0; i < 10; i = ++i) {
        const kdaColor = [i/10, i/10, i/10, 1];
        qGL.scissor(50 + 10*i, 20*i, 300 - 20*i, 400 - 40*i);
        qGL.clearColor(...kdaColor);
        qGL.clear(qGL.COLOR_BUFFER_BIT);
      }
    }
    </script>
  </head>
  <body onload="Render();">
    <canvas id="idCanvas" width="400", height="400" style="border:1px solid lightgray"></canvas>
  </body>
</html>

WebGL JavaScript

Drawing Rectangles With Scissor Tests.

DrawingRectanglesWithScissorTests.html

Output