title: Three.Js draw linear gradient texture in webgl
body: <p>With canvas renderer, I am using a function that draws a linear gradient.  I would like this to work with the webgl renderer as well, but it chokes on transparency.  The code is below and <a href="http://jsfiddle.net/FtML5/1/" rel="noreferrer">here is a link to a fiddle</a> which demonstrates what I mean.</p>
  
  <pre><code>function generateTexture() {
  
  var size = 512;
  
  // create canvas
  canvas = document.createElement( 'canvas' );
  canvas.width = size;
  canvas.height = size;
  
  // get context
  var context = canvas.getContext( '2d' );
  
  // draw gradient
  context.rect( 0, 0, size, size );
  var gradient = context.createLinearGradient( 0, 0, size, size );
  gradient.addColorStop(0, '#99ddff'); // light blue 
  gradient.addColorStop(1, 'transparent');
  context.fillStyle = gradient;
  context.fill();
  
  return canvas;
  </code></pre>
  
  <p>}</p>