title: Three.JS: Drawing texture directly to canvas without creating a plane (in a billboard fashion)
body: <p>I'm rendering a custom texture using a <code>WebGLRenderTarget</code>. What I need now is to be able to draw the resulting <code>renderTarget.texture</code> directly to the canvas, without adding it to a plane first.</p>
  
  <p>The reason for this is that my camera is orbiting and moving a lot, and I want the texture to be fixed on the top-right corner, like a billboard, without getting left behind.<a href="https://i.stack.imgur.com/Qvzn3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qvzn3.jpg" alt="Example"></a></p>
  
  <p>My pseudo-code looks like this:</p>
  
  <pre><code>// Create renderer 1
  var renderer1 = new THREE.WebGLRenderer();
  renderer1.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer1.domElement);
  
  // Create renderer 2
  var renderer2 = new THREE.WebGLRenderer();
  renderer2.setSize(100, 100);
  document.body.appendChild(renderer2.domElement);
  
  var renderTarget = new THREE.WebGLRenderTarget(100, 100);
  
  // Create texture to renderTarget
  renderer1.render(textureScene, ortoCam, renderTarget, false);
  
  // Render textureScene to second renderer to see texture
  renderer2.render(textureScene, ortoCam);
  
  // Render the rest of the scene, with a moving perspective camera
  renderer1.render(scene, perspCam);
  </code></pre>
  
  <p>This works, but feels very inefficient, especially since I'm creating a second renderer to add a second 100x100 canvas. Is there any way to grab the <code>renderTarget.texture</code> and draw it on top of the first canvas so I can skip using the second renderer? I need the renderTarget output to create height maps, but also need it to be visible in a billboard fashion on the top-right corner.</p>
  
  <p><strong>Update:</strong>
  I've tried creating a 2D canvas context and using <code>context.drawImage(this.renderTarget.texture.image, 10, 10, 20, 20);</code> but <code>renderTarget.texture.image</code> is undefined. Any ideas why I can't get that image data?</p>