title: Using Canvas fillText() - HTML5, JavaScript
body: <p>I have a plugin that will fill text based on an image using the following:</p>
  
  <pre><code>function draw() {
          //grab font to use
          var fFamily = $(".activeText a .fontType-cont").val();
          ctx.font = startFontSize + 'px ' + fFamily;
          ctx.fillText(text, 10, 100);
  
          ctx.globalCompositeOperation = 'source-in';
          ctx.drawImage(img, 10, 20, 500, 100);
  }
  
  var canvas = document.getElementById(current),
  ctx = canvas.getContext('2d'),
  img = document.createElement('img');
  //draw it
  img.onload = draw;
  
  img.src = $(".activeGColor").find('img').attr('src');
  </code></pre>
  
  <p>What happens is that the canvas will take that image, display it in the canvas and as the text gets bigger, you see it as the fill for the text.  My issue is that, How can I make it so it does not look stretched or whatnot?  Do I have an option to do so?</p>
  
  <p>What are your ideas?</p>