android - raras - letras borrosas

Texto borroso/fuente en el elemento canvas

Question

Obtengo texto / fuente borrosos en un lienzo solo en Firefox (Android). Estoy probando un Nexus 7 (2013) que tiene un dispositivo PixelRatio de 2. Ya he combatido las pantallas de alta densidad usando este artículo sobre rocas html5 . Esto funciona absolutamente fantástico para todos mis navegadores de escritorio (Chrome, Firefox, Safari, Opera, IE 10) y Chrome para Android.

He buscado el problema y encontré que alguien que tiene un problema con la carga es borroso. Así que creé esta prueba: http://jsfiddle.net/MadLittleMods/rjLaC/ pero no hay diferencia entre la carga y la generación manual desde el botón en cualquier navegador.

Mi proyecto real es crear elementos de etiquetas:

Demostración: jsFiddle

Vista previa ( Escritorio de Chrome v. 30.0.1599.69):

Vista previa de gran tamaño porque nexus tiene una alta densidad de píxeles ( Chrome Android v. 30.0.1599.82):

Vista previa ( Firefox desktop v. 24.0):

Vista previa de gran tamaño porque nexus tiene una alta densidad de píxeles ( FireFox Android v. 24.0):

No tengo idea de qué hace que el FireFox se vuelva borroso.

Aquí está mi implementación del artículo HTML5 Rocks :

// ...
// React to high pixel density (retina) screens
var hdCanvasWidth = rectX + rectWidth + 1;
var hdCanvasHeight = rectY + rectHeight + .5;
/* * /
$(element).attr({
    ''width'': hdCanvasWidth * window.devicePixelRatio,
    ''height'': hdCanvasHeight * window.devicePixelRatio
});
/* */

// finally query the various pixel ratios
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1,

ratio = devicePixelRatio / backingStoreRatio;

// ensure we have a value set for auto.
// If auto is set to false then we
// will simply not upscale the canvas
// and the default behaviour will be maintained
if (typeof auto === ''undefined'') {
    auto = true;
}

// upscale the canvas if the two ratios don''t match
if (auto && devicePixelRatio !== backingStoreRatio) {

    $(element).attr({
        ''width'': hdCanvasWidth * ratio,
        ''height'': hdCanvasHeight * ratio
    });

    $(element).css({
        ''width'': hdCanvasWidth + ''px'',
        ''height'': hdCanvasHeight + ''px''
    });

    // now scale the context to counter
    // the fact that we''ve manually scaled
    // our canvas element
    context.scale(ratio, ratio);

}
// No weird ppi so just resize canvas to fit the tag
else
{
    $(element).attr({
        ''width'': hdCanvasWidth,
        ''height'': hdCanvasHeight
    });
}
// ...

Answer 1

Esto ya no es un problema en Firefox para Android.

Acabo de probar con FireFox 28.0.1 en Android 4.4.2 y es completamente nítido.