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

Question

我仅在 FireFox (Android) 中的画布上出现模糊的文本/字体。我正在 Nexus 7 (2013) 上进行测试，它的 devicePixelRatio 为 2。我已经解决了高密度屏幕使用this article on html5 rocks。这对于我所有的桌面浏览器（Chrome、Firefox、Safari、Opera、IE 10）和适用于 Android 的 Chrome 来说都非常棒。

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

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

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 进行了测试，它非常清晰。