html - Subpixel anti-aliased text on HTML5's canvas element

Question

I'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 "Quick Brown Fox" is an H1 element and the bottom one is a canvas element with text rendered on it. On the bottom you can see both "F"s placed side by side and zoomed in. Notice how the H1 element blends better with the background:

Here's the code I'm using to render the canvas text:

        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);
        }

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?

Answer 1

It's now possible to get sub-pixel font rendering by creating an opaque canvas context. In Safari and Chrome you can get this using this snippet:

var ctx = canvas.getContext("2d", {alpha: false})

I found this from this blog post.