title: Subpixel anti-aliased text on HTML5's canvas element
body: <p>I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help.</p>
  <p>In the following screenshot the top &quot;Quick Brown Fox&quot; is an H1 element and the bottom one is a canvas element with text rendered on it. On the bottom you can see both &quot;F&quot;s placed side by side and zoomed in. Notice how the H1 element blends better with the background:</p>
  
  <p><a href="https://i.stack.imgur.com/cIUCG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cIUCG.png" alt="example 'F'" /></a></p>
  <p>Here's the code I'm using to render the canvas text:</p>
  <pre><code>        var canvas = document.getElementById('canvas');
          if (canvas.getContext){
  
              var ctx = canvas.getContext('2d');
              ctx.fillStyle = 'black';
              ctx.font = '26px Arial';
              ctx.fillText('Quick Brown Fox', 0, 26);
          }
  </code></pre>
  <p>Is it possible to render the text on the canvas in a way so that it looks identical to the H1 element? And why are they different?</p>