Заставить Firefox отображать текст холста так же, как текст CSS

Question

Я экспериментировал с тегом canvas и Javascript. Я создал страницу, которая берет твиты из общедоступной хроники Twitter и оживляет их. Это работает с использованием элемента холста в фоновом режиме для анимации. Когда анимация завершена, создается элемент div с тем же текстом поверх. Я делаю это так, чтобы текст твита можно было выбирать, а ссылки можно было нажимать.

Теперь в Safari, Chrome и даже Opera текст холста и текст div выглядят практически одинаково. Тем не менее, в Firefox размер текста достаточно разный, чтобы он «прыгал» в тот момент, когда он превращается в div.

Кто-нибудь знает, как заставить Firefox отображать текст одинаково на элементе canvas и div, используя CSS? Или это несоответствие рендеринга движку.

Я разместил страницу на моем сайте , если вы хотите понять, что я имею в виду.

Теперь для кода:

CSS, который я использую для рендеринга div, содержит:

line-height: 21px; font-weight: 100; font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; font-size: 20px;

Для рендеринга на холсте я использую:

this.context.font = this.scale + 'px Georgia';
this.context.fillStyle = "white";
this.context.strokeStyle = 'white';
this.context.fillText(this.text, 0, 0);
this.context.strokeText(this.text, 0, 0);

где this.scale - анимированный масштабный коэффициент, который заканчивается точно в 20px. Итак, подведем итог: я использую один и тот же шрифт и получаю одинаковый размер px, но Firefox по-разному отображает текст между Canvas и CSS.

(правка) Вот пример скриншота: альтернативный текст http://danforys.com/temp/firefox-behaviour.png

Первая строка - текст, анимируемый при использовании canvas, вторая строка - результирующий div.

Answer 1

Да, у меня есть контрольный пример .

Я создал элемент div и canvas рядом с одним и тем же текстом. Оказывается, что рендеринг шрифта был красной сельдью. Что отличается от Firefox, так это отчет о ширине символов. Мой визуализатор Twitter вычисляет ширину каждого символа с помощью measureText (). Width и размещает их соответственно. По какой-то причине ширина символов в Firefox меньше.

Как ни странно, в тестовом примере я измеряю две вещи:

1. Общая ширина всего текста
2. Сумма ширины каждого символа в тексте

В Chrome они оба выходят по 399px. В Firefox первый выводится как 393px, второй - 367px.

Edit: Ошибка была закрыта. Mozilla говорит, что это недействительно , я все еще говорю, что это несовместимо с другими браузерами. Мне придется найти другой способ сделать это, или достаточно информации, чтобы убедить Mozilla, что это ошибка в конце концов. В любом случае, спасибо за прослушивание!

Answer 2

Я не вижу такой большой разницы между Firefox и Chrome (кроме скорости ...).

Вы пытались не использовать strokeText? Я думаю, что текст обычно отображается только с использованием fill -операций.

Классное приложение, кстати!