Texto suavizado de subpíxeles en el elemento de lienzo de HTML5

6 minutos de lectura

Texto suavizado de subpixeles en el elemento de lienzo de
mate mazur

Estoy un poco confundido con la forma en que el elemento de lienzo suaviza el texto y espero que todos puedan ayudar.

En la siguiente captura de pantalla, el “Zorro marrón rápido” superior es un elemento H1 y el inferior es un elemento de lienzo con texto representado en él. En la parte inferior, puede ver ambas “F” colocadas una al lado de la otra y ampliadas. Observe cómo el elemento H1 se combina mejor con el fondo:

ejemplo 'F'

Aquí está el código que estoy usando para representar el texto del lienzo:

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

¿Es posible representar el texto en el lienzo de manera que se vea idéntico al elemento H1? ¿Y por qué son diferentes?

  • +1 ¡Esta es una gran pregunta! El texto feo en los elementos del lienzo es muy perceptible para los usuarios finales porque está muy cerca del texto “bueno” que se encuentra en otra parte de la página.

    –Mark E. Haase

    09 feb.


Ahora es posible obtener una representación de fuentes de subpíxeles creando un contexto de lienzo opaco. En Safari y Chrome puedes obtener esto usando este fragmento:

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

Encontré esto de esto entrada en el blog.

  • Eso realmente mejoró la legibilidad del texto en mi proyecto. Gracias.

    – SteveP

    19 mayo, 2015 en 13:38

  • ¿Alguna idea de cómo hacer que esto funcione en FF o IE (versiones recientes)?

    – Timo Kähkönen

    10 sep.

  • @sunnymoon: la publicación del blog de Adobe dice que es un método para obtener subpixel-antialiasing en el texto del lienzo. Y funciona en Chrome, pero no en FF o IE. Pruébate: codepen.io/timo22345/pen/avvOmp. El cuadro de texto a continuación debe tener subpixel-antialiasing.

    – Timo Kähkönen

    13 sep.

  • @Timo, estoy en FF 40.0.3 y veo suavizado de subpíxeles LCD con bordes coloreados (también conocido como ClearType) en ambos lienzos. Entonces, funciona en FF, ¿verdad?

    – luna soleada

    13 sep.

  • @sunnymoon: ¿Qué sistema operativo? Probé en OSX.

    – Timo Kähkönen

    14 sep.

Texto suavizado de subpixeles en el elemento de lienzo de
mate mazur

Respondiendo a mi propia pregunta:

Es posible usar la técnica demostrada en este sitio:

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

El único problema es que es demasiado lento para implementarlo en una aplicación de producción. Si alguien encuentra una forma más rápida, por favor hágamelo saber.

Texto suavizado de subpixeles en el elemento de lienzo de
joubert nel

Matt, me senté con el (mismo/similar) problema la semana pasada, que, en mi caso, resultó ser debido a las diferencias en las densidades de píxeles en los dispositivos que estaba probando; Escribí sobre eso esta noche – http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

El enlace en posterous está muerto, así que aquí está la esencia con el código fuente:
https://gist.github.com/joubertnel/870190

Y el fragmento en sí:

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

  • Posterous ya no existe, por lo que este es un enlace muerto.

    – Colin Alworth

    24 jun.

  • Esta es la solución si resolvió el antialiasing y aún ve fuentes gruesas. Resolví el antialiasing restando el %1 del valor (píxel roto) y luego también hice esto.

    – dewwald

    23 ago.

1642379167 677 Texto suavizado de subpixeles en el elemento de lienzo de
j5v

Esta es una forma de renderizar subpíxeles para ningún contenido del lienzo (texto, imágenes, vectores, etc.). http://johnvalentine.co.uk/archive.php?art=tft.

Esquema del método

Se dibuja en un lienzo, que luego se dibuja en la pantalla para aprovechar los subpíxeles con rayas RGB. También funciona con canales alfa. Tenga en cuenta que esto podría no funcionar si está utilizando una pantalla vertical, píxeles sin rayas o si su navegador muestra lienzos con una resolución más baja que su pantalla.

Hay margen para el ajuste fino, pero es una gran ganancia para un método simple.

1642379167 747 Texto suavizado de subpixeles en el elemento de lienzo de
Phrogz

Esto se llama genéricamente suavizado de subpíxeles, o Tipo claro en Windows No tengo conocimiento de ninguna combinación de sistema operativo/navegador que actualmente admita esto para Canvas.

Me interesaría ver algunas pruebas que usan compensaciones de subpíxeles para el texto para ver si algún navegador incluso usa sugerencias basadas en píxeles de la representación de fuentes (alineación de ascendentes en los límites de píxeles, por ejemplo). Mi suposición sería no.

Editar: Mi suposición estaba equivocada; Parecería que Safari, Chrome y Firefox utilizan algunas sugerencias de fuentes de píxeles. Safari y Chrome parecen iguales, se ajustan a los límites de píxeles completos, pero son diferentes de Firefox (¿se ajustan a los límites de medio píxel?). Vea los resultados visuales de las pruebas (en OS X) aquí: http://phrogz.net/tmp/canvas_text_subpixel.html

  • Gracias por probarlo. También te puede gustar esto: bel.fi/~alankila/lcd

    –Mat Mazur

    29 dic. 10 a las 12:30

  • @MattMazur ¡Qué bueno! Debe publicar eso como una respuesta para que pueda aceptarlo.

    – Phrogz

    29 dic. 10 a las 14:26

1642379168 208 Texto suavizado de subpixeles en el elemento de lienzo de
pieter bruining

Podrías hacer las fuentes mucho más claras con una técnica bastante fácil.

Puede escalar el lienzo en CSS dos veces más pequeño:

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

En el HTML duplica las dimensiones del lienzo:

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

Finalmente dibuja todo en el lienzo en tamaño doble.

Notarás que las fuentes son mucho más claras.

Esto no es completamente igual que H1 en el HTML, pero se ve mucho mejor que la representación de fuente normal.

  • Gracias por probarlo. También te puede gustar esto: bel.fi/~alankila/lcd

    –Mat Mazur

    29 dic. 10 a las 12:30

  • @MattMazur ¡Qué bueno! Debe publicar eso como una respuesta para que pueda aceptarlo.

    – Phrogz

    29 dic. 10 a las 14:26

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad