Angularjs指令画布模糊

我为angularjs创建了一个指令，该指令使用html5的canvas元素来可视化四个距离传感器

jsfiddle：

不幸的是，我无法使绘图清晰明了，因为一切都有点模糊（至少在我的Nexus5上，在我的pc显示器上看起来不错，但也不太好）

我基本上是用

ctx.arc（x，y，10，角度后置，角度停止，假）

我在画布元素本身上设置宽度和高度，而不是通过css。我尝试了
ctx.scale（2,2）
功能，但它没有任何作用。我看到一些文章将东西移动到0.5，但由于圆圈是圆的，这也没有帮助

由于浏览器可以渲染svg和边界半径等内容，因此一定可以使圆变得尖锐。我读了html5 rocks关于hdpi画布的文章，但是它太关注图像和字体了，所以我可能错过了那里的东西

有什么办法可以使圆圈变尖吗？
我更新了你的小提琴，使它实际上可以用ctx.scale缩放圆环，但它看起来不太好。。。使用50的比例将完全删除所有抗锯齿。使用0.9的比例会添加更多的抗锯齿。如果在您的设备上显示有任何不同，也许您可以尝试一下

var scale = 0.9;
canvas.setAttribute('width', canvas.width * scale);
canvas.setAttribute('height', canvas.height * scale);
ctx.scale(scale, scale);

还有一些CSS使画布与以前一样大：

canvas {
    width: 175px;
    height: 200px;
}

首先，将画布高度和宽度HTML属性设置为所需大小的两倍。因此：

<canvas height="400px" width="350px">

接下来，在CSS中，将canvas元素的大小设置为所需的大小

canvas {
   width: 175px;
   height: 200px;
}

最后，您需要绘制两倍大的圆弧，以便它们在CSS缩放的画布中占据适当的空间

这里的想法很简单——我们以所需大小的两倍生成整个渲染画布，然后使用CSS将其设置为该大小的一半。
好的，我明白了，但这并不能真正解决问题，我想解决方案离起点太近了，因为改进很小（在手机和pc上相同）。也许有人提出了一些关于这个问题的背景细节不，我知道，只是想在解决问题的同时分享我的发现：）顺便说一句，试着将量表设置为2。这使得我的iPad Mini上的图像显示得更加清晰。
canvas {
   width: 175px;
   height: 200px;
}