WEBGL:RECTANGLE

MAKE TWO RECT

HTML

<canvas id="mainCanvas">
    
</canvas>

CSS

canvas {
    width: 200px;
    height: 200px;
}

JavaScript

function main()
{
   // Configure the canvas to use WebGL
   //
   var gl;
   var canvas = document.getElementById('mainCanvas');
   try {
      gl = canvas.getContext('experimental-webgl', {antialias: false});
   } catch (e) {
      throw new Error('no WebGL found');
   }
   
   canvas.width = 200;
   canvas.height = 200;
   gl.viewport(0, 0, 200, 200);

   // Copy an array of data points forming a triangle to the
   // graphics hardware
   //
   var vertices = [
       50,149,
       50,50,
        149,50,
       149,50,
        50,149,
       149,149
      
     
       
   ];
   
   function drawRect(x, y, w, h)
   {
      var x1 = x;
      var x2 = x + w;
      var y1 = 200 - y;
      var y2 = 200 - (y + h);

      return [x1, y1, x2, y1, x1, y2, x1, y2, x2, y1, x2, y2];
   }
   
   var vertices = drawRect(4, 4, 10, 10);
   
   var buffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

   // Create a simple vertex shader
   //
   var vertCode =
        'precision highp float;' +
        'attribute vec2 coordinates;' +
        'void main(void) {' +
        'vec2 c = (coordinates) / 200.0;' +
        'c = c * 2.0;' +
        'c = c - 1.0;' +
        '  gl_Position = vec4(c, 0.0, 1.0);' +
        '}';

   var vertShader = gl.createShader(gl.VERTEX_SHADER);
   gl.shaderSource(vertShader, vertCode);
   gl.compileShader(vertShader);
   if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS))
      throw new Error(gl.getShaderInfoLog(vertShader));

   // Create a simple fragment shader
   //
   var fragCode =
      'precision highp float;' +
      'void main(void) {' +
      '   gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);' +
      '}';
    
   var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
   gl.shaderSource(fragShader, fragCode);
   gl.compileShader(fragShader);
   if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS))
      throw new...