title: How do you fill Text in Canvas with Image?
body: <p>I've been working with the HTML5 canvas recently and was wondering if there was a way to fill Text with an image instead of a solid color?</p>
  
  <p>I can currently get something like this to work:</p>
  
  <p><img src="https://i.stack.imgur.com/2dXUS.png" alt="What I can do"></p>
  
  <p>But I need the text to look something like (can be done in Photoshop):</p>
  
  <p><img src="https://i.stack.imgur.com/PLT2e.png" alt="Example"></p>
  
  <p>I've read numerous times about sometimes having to render parts on an image on a 2nd canvas and importing the drawing to the main-visible canvas, but most of that was about tinting images (not sure if that would work here).</p>
  
  <p>Why I need this: As you can see the controller above is nice and shinny, but the text isn't and the client wants me to pull the text color from the different controller shell colors to make it look at realistic as possible.</p>
  
  <p>While searching some more I did happen to find <a href="http://www.html5rocks.com/en/tutorials/canvas/texteffects/Text-Effects.html#pattern+gradient+reflect" rel="nofollow noreferrer">this example</a>, which is exactly what I want. But unfortunately the problem with the example is that I would then need to somehow export only the text of the image, which I don't think is possible, so it can be transposed into the new image without the black outer layer covering part of the controller.</p>
  
  <p>If someone would please send me in the right direction, no matter how complex, I will greatly appreciate it.</p>
  
  <p>P.S. Here if the draw Order of the controller:</p>
  
  <ol>
  <li>Shell</li>
  <li>Text</li>
  <li>Parts/Back</li>
  <li>Thumb Sticks</li>
  <li>Guide Button</li>
  <li>ABXY Buttons</li>
  <li>Mask around controller (prevent text overflow)</li>
  </ol>