title: ThreeJS: Text Sprite's font size difference between WebGL renderer and Canvas renderer
body: <p>I am using Three JS to develop a 3d graph. I want to show units of a graph as <code>THREE.SPRITE</code>. For creating <code>SPRITE</code>, I have first created a canvas element and added text to it. Then I have created <code>THREE.Texture</code> with the canvas element that was previously created. Created <code>THREE.SpriteMaterial</code> with the texture as a map and then created <code>THREE.SPRITE</code> using this sprite material. Added this sprite material to scene. When the renderer is an instance of <code>THREE.WebGLRenderer</code> the size of text is very small and when the renderer is an instance of <code>THREE.CanvasRenderer</code> then the size of text is very large. </p>
  
  <p>Following is the code that I have used to create Sprite.</p>
  
  <pre><code>var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      metrics = null,
      textHeight = 100,
      textWidth = 0,
      actualFontSize = 20;
  
  context.font = "normal " + textHeight + "px Arial";
  metrics = context.measureText("Sample Text");
  var textWidth = metrics.width;
  
  canvas.width = textWidth;
  canvas.height = textHeight;
  context.font = "normal " + textHeight + "px Arial"; 
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillStyle = "#ff0000";
  context.fillText("Sample Text", textWidth / 2, textHeight / 2);
  
  var texture = new THREE.Texture(canvas);
  texture.needsUpdate = true;
  
  var material = new THREE.SpriteMaterial({ map: texture, useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center });
  material.transparent = true;
  //var textObject = new THREE.Sprite(material);
  var textObject = new THREE.Object3D();
  var sprite = new THREE.Sprite(material);
  textObject.textHeight = actualFontSize;
  textObject.textWidth = (textWidth / textHeight) * textObject.textHeight;
  //sprite.scale.set(textObject.textWidth / textWidth, textObject.textHeight / textHeight, 1);
  textObject.add(sprite);
  
  scene.add(textObject);
  </code></pre>
  
  <p>Is it the default behavior or am I doing anything wrong. I am seeking a fix that works in both Canvas and WebGL renderers consistently.</p>