text: Q:
  
  How to Create a TreeMap WebGL
  
  I am trying yo create a treemap using webGL, I seem to be lost in between arrrays and I can't figure out what is wrong. I also don't know how to write the names to the canvas.
  P.S. whenever I use the line   context.fillText(obj2[i][2], width, height); inside the second for loop, the entire canvas does not get displayed.
        function initBuffers() {          
          var canvas = document.getElementById("webgl_canvas");
          var context = canvas.getContext("2d");
          var y = [];
          var canvas = document.getElementById("webgl_canvas");
          var canvas_area = canvas.width*canvas.height;
          var obj = ([["Root", "Null", 2],
                      ["Mohab", "Root", 0],
                      ["Tarek", "Root", 3],
                      ["Hany", "Tarek", 0],
                      ["Halim", "Tarek", 2],
                      ["Mahdy", "Tarek", 0],
                      ["Aly", "Halim", 1],
                      ["Osama", "Halim", 0],
                      ["Khaled", "Aly", 0]]);
          var obj2 = obj;
          for(var i=0; i<obj.length; i++){
                  obj2[i][0] = obj[i][0];
                  obj2[i][1] = obj[i][1];
                  obj2[i][2] = parseInt(obj[i][2], 10);
          }
          var width = canvas.width;
          var height = canvas.height;
          //alert(canvas.length/obj[i][2]);
          for(var i=0; i<obj2.length; i++){
              for(var j=0; j<obj2[i][2]; j++){
                      if(width>=height){
                          y.push(width/obj2[i][2]);
                          y.push(0);
                          y.push(0);
                          y.push(width/obj2[i][2]);
                          y.push(height);
                          y.push(0);
                          width = width/obj[i][2];
                          }
                      else{
                          y.push(0);
                          y.push(height/obj2[i][2]);
                          y.push(0);
  
                          y.push(width);
                          y.push(height/obj2[i][2]);
                          y.push(0);
                          height = height/obj[i][2];
                      }
              }
          }
          alert(y);
  
          pointsBuffer1 = gl.createBuffer();
          gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer1);
          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(y), gl.STATIC_DRAW);
  
          pointsBuffer1.itemSize = 3;
          pointsBuffer1.numItems = y.length/3;
      }
  
  A:
  
  WebGL has no fillText function. 
  When you call canvas.getContext you can choose one of 2 APIs. "2d" or "experimental-webgl". Once you pick one that canvas can only use that API and not the other. 
  For WebGL there are no text functions. You have to write your own by one of the following methods
  
  Make textures filled with text (use another offscreen canvas with a 2D API to draw text into and then copy the result into a WebGL texture with texImage2D). Then render quads to show those textures.
  Make a font texture will all the font characters. Then draw a polygon for each character with the UVs set to select one character from your font texture.
  Create meshes of text. 
  
  Otherwise if you don't need the text to z-buffer/sort with the 3D scene you can use one of these methods:
  
  Make 2 canvases, overlap them with CSS, make the back one use the WebGL API and make the front one have a 2D API. Doing the correct math you can draw the text in the 2D canvas to match the 3D in the WebGL canvas.
  Make 1 canvas with WebGL and a bunch of divs for your text. Using CSS you can make the divs appear above the canvas and position them where want.
  
  