title: Size to fit font on a canvas
body: <p>I currently have this <strong><a href="http://jsfiddle.net/dgAEY/" rel="noreferrer">http://jsfiddle.net/dgAEY/</a></strong> which works perfectly, I just need to figure out a way to size the font when it gets too long. I've looked into <a href="https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container">Auto-size dynamic text to fill fixed size container</a> and I've tried to apply the Jquery function they posted but I couldn't get it to work.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form action="" method="POST" id="nametag" class="nametag"&gt;
      Line1: 
      &lt;input type="text" id="line1" name="line1" style="width:250px;" /&gt;&lt;br&gt;
      Line2:
      &lt;input type="text" id="line2" name="line2" style="width:250px;" /&gt;&lt;br&gt;
      Line3:
      &lt;input type="text" id="line3" name="line3" style="width:250px;" /&gt;&lt;br&gt;
      Line4:
      &lt;input type="text" id="line4" name="line4" style="width:250px;" /&gt;&lt;br&gt;
  
      &lt;br&gt;&lt;br&gt;&lt;b&gt;Name Tag&lt;/b&gt;&lt;br&gt;
      &lt;canvas width="282px" height="177px" id="myCanvas" style="border: black thin solid;"&gt;&lt;/canvas&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function () {
      var canvas = $('#myCanvas')[0];
      var context = canvas.getContext('2d');
  
      var imageObj = new Image();
      imageObj.onload = function() {
          context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = "http://dummyimage.com/282x177/FFF/FFF"; 
  
      $('#nametag').bind('change keyup input', updateCanvas);
      $('#line2').bind('click', updateCanvas);
      $('#line3').bind('click', updateCanvas);
      $('#line4').bind('click', updateCanvas);
  
      function updateCanvas() {
  
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.drawImage(imageObj, 0, 0);
          context.textAlign = "center";
  
          context.font = "bold 18pt Arial";
          context.fillText($('#line1').val(), canvas.width * 0.5, 70);
  
          context.font = "12pt Arial";
          context.fillText($('#line2').val(), canvas.width * 0.5, 90);
          context.fillText($('#line3').val(), canvas.width * 0.5, 120);
          context.fillText($('#line4').val(), canvas.width * 0.5, 140);
  
      }
  });
  </code></pre>