Texte anticrénelé sous-pixel sur l'élément canvas de HTML5

Question

J'ai du mal à comprendre la façon dont l'élément de toile anticrénelage du texte et j'espère que vous pourrez m'aider.

Dans la capture d'écran suivante, l'élément supérieur "Quick Brown Fox" est un élément H1 et l'élément inférieur est un élément canvas avec du texte rendu. En bas, vous pouvez voir les deux "F" placés côte à côte et agrandis. Remarquez que l'élément H1 se fond mieux dans l'arrière-plan :

Voici le code que j'utilise pour rendre le texte de la toile :

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

Est-il possible de rendre le texte sur le canevas de manière à ce qu'il soit identique à l'élément H1 ? Et pourquoi sont-ils différents ?

Answer 1

Vous pourriez rendre les polices de caractères beaucoup plus claires avec une technique assez simple.

Vous pouvez redimensionner le canevas en CSS deux fois plus petit :

canvas {
    transform-origin: left top;
    transform: scale(0.5);
}

Dans le HTML, doublez les dimensions de la toile :

<canvas width="(width*2)" height="(height*2)">

Enfin, dessinez tout sur la toile en taille double.

Vous remarquerez que les polices de caractères sont beaucoup plus claires.

Ce n'est pas tout à fait la même chose que le H1 dans le HTML, mais c'est beaucoup mieux que le rendu normal des polices.