title: How do I fix blurry text in my HTML5 canvas?
body: <p>I am a total <em>n00b</em> with <code>HTML5</code> and am working with the <code>canvas</code> to render shapes, colors, and text. In my app, I have a <em>view adapter</em> that creates a canvas dynamically, and fills it with content. This works really nicely, except that my text is rendered very fuzzy/blurry/stretched. I have seen a lot of other posts on why defining the <em>width</em> and <em>height</em> in <code>CSS</code> will cause this issue, but I define it all in <code>javascript</code>.</p>
  <p>The relevant code (view <a href="http://jsfiddle.net/65maD/" rel="noreferrer">Fiddle</a>):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var width  = 500;//FIXME:size.w;
  var height = 500;//FIXME:size.h;
      
  var canvas = document.createElement("canvas");
  //canvas.className="singleUserCanvas";
  canvas.width=width;
  canvas.height=height;
  canvas.border = "3px solid #999999";
  canvas.bgcolor = "#999999";
  canvas.margin = "(0, 2%, 0, 2%)";
      
  var context = canvas.getContext("2d");
  
  //////////////////
  ////  SHAPES  ////
  //////////////////
      
  var left = 0;
  
  //draw zone 1 rect
  context.fillStyle = "#8bacbe";
  context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);
  
  left = left + canvas.width*1.5/8.5;
  
  //draw zone 2 rect
  context.fillStyle = "#ffe381";
  context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);
  
  left = left + canvas.width*2.75/8.5 + 1;
  
  //draw zone 3 rect
  context.fillStyle = "#fbbd36";
  context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
  
  left = left + canvas.width*1.25/8.5;
  
  //draw target zone rect
  context.fillStyle = "#004880";
  context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);
  
  left = left + canvas.width*0.25/8.5;
      
  //draw zone 4 rect
  context.fillStyle = "#f8961d";
  context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
  
  left = left + canvas.width*1.25/8.5 + 1;
  
  //draw zone 5 rect
  context.fillStyle = "#8a1002";
  context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);
  
  ////////////////
  ////  TEXT  ////
  ////////////////
  
  //user name
  context.fillStyle = "black";
  context.font = "bold 18px sans-serif";
  context.textAlign = 'right';
  context.fillText("User Name", canvas.width, canvas.height*.05);
  
  //AT:
  context.font = "bold 12px sans-serif";
  context.fillText("AT: 140", canvas.width, canvas.height*.1);
  
  //AB:
  context.fillText("AB: 94", canvas.width, canvas.height*.15);
         
  //this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout.
  var parent = document.getElementById("layout-content");
  parent.appendChild(canvas);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="layout-content"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The results I am seeing (in <em>Safari</em>) are much more skewed than shown in the Fiddle:</p>
  <p><strong>Mine</strong></p>
  <p><img src="https://i.stack.imgur.com/Dh51D.png" alt="Rendered output in Safari" /></p>
  <p><strong>Fiddle</strong></p>
  <p><img src="https://i.stack.imgur.com/HuRUB.png" alt="Rendered output on JSFiddle" /></p>
  <p>What am I doing incorrectly? Do I need a separate canvas for each text element? Is it the font? Am I required to first define the canvas in the HTML5 layout? Is there a typo? I am lost.</p>