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.