Субпиксельный сглаженный текст в элементе холста HTML5

Я немного смущен тем, как элемент холста сглаживает текст, и я надеюсь, что вы все можете помочь .

На следующем снимке экрана верхний «Quick Brown Fox» - это элемент H1, а нижний - это элемент холста с отрисованным на нем текстом. Внизу вы можете увидеть обе буквы «F», расположенные рядом и увеличенные. Обратите внимание, как элемент H1 лучше сочетается с фоном:

Вот код, который я использую для визуализации текста холста:

        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 Можно ли отобразить текст на холсте таким образом, чтобы он выглядел идентично элементу H1? И почему они разные?

45
задан Community 8 February 2017 в 14:31
поделиться