title: HTML5 Canvas: Why does measuring text with measureText and offsetWidth() give different values?
body: <p>I benchmarked offsetWidth() vs measureText and I am getting drastically different values. Shouldn't they be the same? Why are they different?</p>
  
  <p>Here is the jsfiddle and raw code below:
  <a href="http://jsfiddle.net/WhGk7/2/">http://jsfiddle.net/WhGk7/2/</a></p>
  
  <pre><code>&lt;canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"&gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  &lt;span id="visibilityHack" style="visibility: hidden; font: 15px Arial;"&gt;textAlign=start&lt;/span&gt;
  &lt;div id="results"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  
  // Create a red line in position 150
  ctx.strokeStyle="red";
  ctx.moveTo(150,20);
  ctx.lineTo(150,170);
  ctx.stroke();
  var measureTextWidth = ctx.measureText("textAlign=start").width;
  var measureTextNode =  document.createTextNode("measureTextWidth: " + measureTextWidth);
  document.getElementById("results").appendChild(measureTextNode);
  
  var swidth = document.getElementById("visibilityHack").offsetWidth;
  var textnode = document.createTextNode("     offsetWidth: " + swidth);
  document.getElementById("results").appendChild(textnode);
  
  
  ctx.font="15px Arial";    
  
  // Show the different textAlign values
  ctx.textAlign="start";      
  ctx.fillText("textAlign=start",117,60);        
  ctx.textAlign="center";     
  ctx.fillText("textAlign=start",150,120);
  &lt;/script&gt;
  </code></pre>