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

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

На следующем скриншоте верхний "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);
        }

Можно ли сделать текст на холсте таким образом, чтобы он выглядел идентично элементу H1? И почему они разные?

Ответ 1

Отвечая на мой собственный вопрос:

Возможно использование метода, продемонстрированного на этом сайте:

https://bel.fi/alankila/lcd/

Единственная проблема заключается в том, что ее слишком медленно реализовать в производственном приложении. Если кто-то бежит быстрее, пожалуйста, дайте мне знать.

Ответ 2

Теперь можно получить субпиксельный рендеринг шрифтов, создав непрозрачный контекст холста. В Safari и Chrome вы можете получить это с помощью этого фрагмента:

var ctx = canvas.getContext("2d", {alpha: false})

Я нашел это из этого сообщения .

Ответ 3

Мэтт, я сидел с (той же/подобной) проблемой на прошлой неделе, что, в моем случае, оказалось из-за различий в плотности пикселей на устройствах, которые я тестировал; Я написал об этом сегодня вечером - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

Ссылка на новость мертва, поэтому вот суть с исходным кодом: https://gist.github.com/joubertnel/870190

И сам фрагмент:

  // Output to Canvas without consideration of device pixel ratio
  var naiveContext = $('#naive')[0].getContext('2d');    
  naiveContext.font = '16px Palatino';
  naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20);

  // Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
  var hidefCanvas = $('#hidef')[0];
  var hidefContext = hidefCanvas.getContext('2d');

  if (window.devicePixelRatio) {
    var hidefCanvasWidth = $(hidefCanvas).attr('width');
    var hidefCanvasHeight = $(hidefCanvas).attr('height');
    var hidefCanvasCssWidth = hidefCanvasWidth;
    var hidefCanvasCssHeight = hidefCanvasHeight;

    $(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio);
    $(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio);
    $(hidefCanvas).css('width', hidefCanvasCssWidth);
    $(hidefCanvas).css('height', hidefCanvasCssHeight);
    hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);               
  }

  hidefContext.font = "16px Palantino";
  hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);

Ответ 4

Вот способ выполнения субпиксельной рендеринга для любого содержимого холста (текст, изображения, векторы и т.д.). http://johnvalentine.co.uk/archive.php?art=tft.

Схема метода

Он натягивается на холст, который затем тянется к экрану, чтобы использовать субпиксели RGB-striped. Он также работает с альфа-каналами. Обратите внимание, что это может не сработать, если вы используете портретный дисплей, не полосатые пиксели или если ваш браузер отображает холсты с меньшим разрешением, чем ваш дисплей.

Имеется возможность тонкой настройки, но это большой выигрыш для простого метода.

Ответ 5

Это обычно называется подпиксельное сглаживание или ClearType в Windows. Я не знаю никаких комбинаций ОС/браузеров, которые в настоящее время поддерживают это для Canvas.

Мне было бы интересно увидеть некоторые тесты с использованием субпиксельных смещений для текста, чтобы увидеть, могут ли какие-либо браузеры использовать пиксельные подсказки для рендеринга шрифтов (например, выравнивание восходящих линий на границах пикселей). Мое предположение не будет.

Изменить: мое предположение было неправильным; похоже, что Safari, Chrome и Firefox используют некоторые пиксельные шрифты. Safari и Chrome появляются одинаково, привязавшись к границам всего пикселя, но отличаются от Firefox (привязка к границам с половиной пикселей?). Смотрите визуальные результаты тестирования (на OS X) здесь: http://phrogz.net/tmp/canvas_text_subpixel.html