I&#39;m a bit confused with the way the canvas element anti-aliases text and am hoping you all can help. 

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:

&lt;!-- ![](https://jmockups.s3.amazonaws.com/canvas_rendering_both.png) --&gt;
[![example &#39;F&#39;][1]][1]

Here&#39;s the code I&#39;m using to render the canvas text:


			var canvas = document.getElementById(&#39;canvas&#39;);
			if (canvas.getContext){

				var ctx = canvas.getContext(&#39;2d&#39;);
				ctx.fillStyle = &#39;black&#39;;
				ctx.font = &#39;26px Arial&#39;;
				ctx.fillText(&#39;Quick Brown Fox&#39;, 0, 26);
			}

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?


  [1]: https://i.stack.imgur.com/cIUCG.png

All Subpixel Solutions on Gang of Coders

Total of 1 Subpixel Solutions

Subpixel anti-aliased text on HTML5's canvas element