title: Fabric curvedText spacing / kerning issues
body: <p>I'm trying to fix a spacing/kerning issue i've come across in the fabric.curvedText.js extension.</p>
  
  <p><strong>curvedText.js</strong></p>
  
  <p><a href="https://github.com/Skritz/fabric.curvedText/blob/master/curvedText.js" rel="nofollow">https://github.com/Skritz/fabric.curvedText/blob/master/curvedText.js</a></p>
  
  <p>When Adding capital letters into a sentence it's seems to throw off the spacing between each letters on the radius.</p>
  
  <p>Any ideas on how I can fix this?</p>
  
  <p><strong>HTML &amp; CSS</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  body{
  font-family: Helvetica;
  font-weight: normal;
  font-size: 13px;
  }
  .canvas-box{
  clear: both;
  position: relative;
  width: 740px;
  height: 700px;
  margin: auto;
  }
  .canvas-box .canvas-nav{
  width: 200px;
  height: 462px;
  float: left;
  position: relative;
  background: #E9E9E9;
  padding: 20px;
  }
  .canvas-box .canvas-wrap{
  float: left;
  position: relative;
  }
  &lt;/style&gt;
  
  &lt;div class="canvas-box"&gt;
  &lt;div class="canvas-wrap"&gt;
  &lt;canvas id="c" width="500" height="500" style="border:1px solid #E9E9E9;"&gt;&lt;/canvas&gt;&lt;br/&gt;
  &lt;/div&gt;
  &lt;div class="canvas-nav"&gt;
  &lt;input type="text" id="text" value="Enter Your Name" maxlength="20" /&gt;&lt;br&gt;
  Radius : &lt;input type="range"  min="0" max="100" value="50" id="radius" /&gt;&lt;br&gt;
  Spacing : &lt;input type="range"  min="5" max="40" value="20" id="spacing" /&gt;&lt;br&gt;
  &lt;button id="save_img"&gt;Save Image&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="show_img"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>&lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'&gt;&lt;/script&gt;
  &lt;!--[if IE]&gt;&lt;script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  &lt;script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src="https://rawgithub.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  $(window).load(function(){
  var CurvedTextWidth = 0;
  canvas = new fabric.Canvas('c');
  var circle = new fabric.Circle({
  radius: 100, fill: 'blue', left: $("#c").width() / 2, top: $("#c").height() / 2, selectable: false
  });
  canvas.add(circle);
  canvas.on('selection:cleared', onDeSelected);
  canvas.on('object:selected', onSelected);
  canvas.on('selection:created', onSelected);
  
  var CurvedText = new fabric.CurvedText($('#text').val(),{
  left: $("#c").width() / 2,
  top: $("#c").height() / 2 -50,
  textAlign: 'center',
  fill: '#ffffff',
  radius: 80,
  id: 12,
  fontSize: 18,
  spacing: 10,
  fontFamily: 'Arial',
  fontWeight: 'normal'
  });
  
  canvas.add(CurvedText).renderAll(); 
  canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
  $('#text').keyup(function(){
  var obj = canvas.getActiveObject();
  if(obj){
  obj.setText(this.value);
  canvas.renderAll();
  //update space and position
  updatePos();
  }
  });
  
  $('#text').focus(function(){
  canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
  });
  
  //update space and position
  function updatePos(){
  CurvedText.top=$("#c").height() / 2 - 86 + CurvedText.height/2;
  canvas.renderAll();
  }
  
  $('#radius, #spacing').change(function(){
  var obj = canvas.getActiveObject();
  if(obj){
  obj.set($(this).attr('id'),$(this).val()); 
  }
  canvas.renderAll();
  //update space and position
  updatePos();
  });
  
  $('#radius, #spacing').change(function(){
  var obj = canvas.getActiveObject();
  if(obj){
  obj.set($(this).attr('id'),$(this).val()); 
  }
  canvas.renderAll();
  //update space and position
  updatePos();
  });
  
  $('#convert').click(function(){
  var props = {};
  var obj = canvas.getActiveObject();
  if(obj){
  if(/curvedText/.test(obj.type)) {
  default_text = obj.getText();
  props = obj.toObject();
  delete props['type'];
  var textSample = new fabric.Text(default_text, props);
  }else if(/text/.test(obj.type)) {
  default_text = obj.getText();
  props = obj.toObject();
  delete props['type'];
  props['textAlign'] = 'center';
  props['radius'] = 50;
  props['spacing'] = 20;
  var textSample = new fabric.CurvedText(default_text, props);
  }
  canvas.remove(obj);
  canvas.add(textSample).renderAll();
  canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));
  }
  });
  
  function onSelected(){
  var obj = canvas.getActiveObject();
  $('#text').val(obj.getText());
  $('#reverse').prop('checked', obj.get('reverse'));
  $('#radius').val(obj.get('radius'));
  $('#spacing').val(obj.get('spacing'));
  $('#fill').val(obj.getFill());
  }
  function onDeSelected(){
  $('#reverse').prop('checked', false);
  $('#radius').val(50);
  $('#spacing').val(20);
  $('#fill').val('#0000FF');
  }
  });//]]&gt;  
  
  $("#save_img").click(function(){
  canvas.deactivateAll().renderAll();
  var mycanvas = document.getElementById("c"); //get your canvas
  var image    = mycanvas.toDataURL("image/png");
  window.open(image);
  });
  &lt;/script&gt;
  </code></pre>