html5画布弧不流畅

Question

我使用canvas为移动应用程序绘制进度加载器。在低分辨率设备中，电弧看起来很模糊。 Android应用程序使用Web View呈现。画布和应用程序中的其他普通文本之间存在显着差异，这在设备上看起来不太好。

创建画布的代码如下：

function drawProgressBar(degrees) {
            var canvas = document.getElementById('canvasProgress');
            if (canvas) {
                var ctx = canvas.getContext('2d');
                var canvasWidth = canvas.width *.5;
                var canvasHeight = canvas.height *.5;
                var radians = 0;

                ctx.clearRect(0, 0, canvasWidth, canvasHeight);

                // backgroud circle
                ctx.beginPath();
                ctx.strokeStyle = circleColor;
                ctx.lineWidth = lineWidth;
                ctx.shadowBlur = 5;
                ctx.shadowColor = "#9fa0a4";
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 1;
                ctx.arc(canvasHeight / 2, canvasWidth / 2, canvasWidth / 3, 0, Math.PI * 4, false);
                ctx.imageSmoothingEnabled = true;
                ctx.closePath();
                ctx.stroke();

                radians = degrees * Math.PI / 50;

                // progressBar
                ctx.beginPath();
                ctx.strokeStyle = progressColor;
                ctx.lineWidth = lineWidth;
                ctx.arc(canvasHeight / 2, canvasWidth / 2, canvasWidth / 3, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
                ctx.stroke();

                // progress update text
                ctx.fillStyle = "#333333";
                ctx.font = '22pt headerCustomFont';
                ctx.shadowBlur = 0;
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                ctx.textAlign = "center";
                ctx.fillText('%', canvasWidth / 2 + 30, canvasHeight / 2 - 3);
                var outputTextPerc = degrees;
                if (degrees === 100) {
                    ctx.fillText(outputTextPerc, canvasWidth / 2 - 8, canvasHeight / 2 - 3);
                } else {
                    ctx.fillText(outputTextPerc, canvasWidth / 2 - 4, canvasHeight / 2 - 3);
                }

                ctx.font = '12pt headerCustomFont';
                ctx.fillText("Complete", canvasWidth / 2, canvasHeight / 2 + 28);
            }
        }

请找到相同的小提琴：http://jsfiddle.net/8ayv5xdk/1/

可以做些什么来使边缘光滑