Estou um pouco confuso com a maneira como o elemento canvas suaviza o texto e espero que todos possam ajudar.

Na captura de tela a seguir, o "Quick Brown Fox" superior é um elemento H1 e o inferior é um elemento de tela com o texto renderizado. Na parte inferior, você pode ver os "F" s colocados lado a lado e com mais zoom. Observe como o elemento H1 combina melhor com o fundo:

Aqui está o código que estou usando para renderizar o texto da tela:

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

É possível renderizar o texto na tela de maneira que pareça idêntico ao elemento H1? E por que eles são diferentes?