画布元素上的模糊文本/字体

Question

我只在FireFox（Android）中在画布上获得模糊的文字/字体。我正在测试Nexus 7（2013），它的devicePixelRatio为2.我已经打了很高密度屏幕使用this article on html5 rocks。这对我的所有桌面浏览器（Chrome，Firefox，Safari，Opera，IE 10）和Chrome for Android都非常有用。

我搜索了这个问题，发现someone having a problem onload模糊不清。所以我创建了这个测试：http://jsfiddle.net/MadLittleMods/rjLaC/但是在任何浏览器中按钮和手动生成之间没有区别。

我的实际项目是制作标记元素：

Demo: jsFiddle

预览（ Chrome桌面 v.30.0.1599.69）：

预览较大，因为nexus具有较高的像素密度（ Chrome Android v.30.0.1599.82）：

预览（ Firefox桌面 v.24.0）：

预览较大，因为nexus具有较高的像素密度（ FireFox Android v.24.0）：

我不知道是什么让FireFox渲染模糊。

以下是我HTML5 Rocks article的实现：

// ...
// 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

这在FireFox for Android中不再是问题。

我刚刚在Android 4.4.2上使用FireFox 28.0.1进行了测试，它非常清晰。