title: draw text from canvas into three js as a sprite
body: <p>long story short, I'm making a live line chart and I'm using three.js due to the high number of lines per second that needs to be pushed inside this thing, so, now I'd need to draw the text values for the x and y axis, after a pretty long struggle ( because I'm a total noob @ threejs ) I figured out the wonderful technique of using the canvas as a sprite ( which is darn rad ).
  This is the code that I use</p>
  
  <pre><code>/// 2D REALM
  
  var canvas = document.createElement('canvas'),
          context = canvas.getContext('2d'),
          metrics = null,
          textHeight = 100,
          textWidth = 0,
          actualFontSize = 2;
  
          context.fillStyle = '#FF0000';
          var size = 250;
            canvas.width = size;
            canvas.height = size;
  
  function addText(position, text) {
    context.textAlign = 'center';
    context.font = '24px Arial';
    context.fillText("Game Over", size/2, size/2);
  
    var texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    var material = new THREE.SpriteMaterial( { map: texture, color: 0x333333, fog: false } );
    var sprite = new THREE.Sprite( material );
    sprite.position.set(0,100,0);
  
    return sprite;
  }
  
  . . .
  
   $(document).ready(function() {
     h = $(window).height() - $('.speed-graph').outerHeight() - $('.speed-toolbar').outerHeight() - $('.channel-toolbar').outerHeight() - $('.status_bar').outerHeight() + 1;
        w = $(window).width() - $('.palette').outerWidth();
  
  
        camera = new THREE.PerspectiveCamera( 75, parseFloat(w) / parseFloat(h), 0.1, 5000 );
  
  
      //renderer.setSize( window.innerWidth, window.innerHeight );
        console.log("w: " + w + " | h: " + h);
        renderer.setSize(w, h);
  
        $('body').append( renderer.domElement );
  
        var material = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 1 });
        var geometry = new THREE.Geometry();
  
        geometry.vertices.push( new THREE.Vector3(-10 , 0, 0 ) );
        geometry.vertices.push( new THREE.Vector3(8 , 0, 0 ) );
  
        lines['line'].push(  new THREE.Line( geometry, material ))
        text = addText(new Array(0, 9), "lorem ipsum");
        //lines['label'].push( addText(new Array(0, 9), "0") );
        scene.add( lines['line'][0] );
        scene.add( text );
  
  
        camera.position.z = 5;
        render(); 
  });
  </code></pre>
  
  <p>now, the lines get drawn as they should, but I had no luck at all with the text.
  I can't understand the reason why I can't see the text,
  because I don't get any compiler error.</p>