Estoy un poco confundido con la forma en que el elemento del lienzo suaviza el texto y espero que todos puedan ayudar.

En la siguiente captura de pantalla, el "Quick Brown Fox" superior es un elemento H1 y el inferior es un elemento de lienzo con texto representado. En la parte inferior puede ver ambas "F" colocadas una al lado de la otra y ampliadas. Observe cómo el elemento H1 combina mejor con el fondo:

Aquí está el código que estoy usando para representar el texto del lienzo:

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

¿Es posible renderizar el texto en el lienzo de manera que se vea idéntico al elemento H1? ¿Y por qué son diferentes?