为什么画布模糊？

Question

我一直在玩画布，并注意到与普通的CSS相比，几乎所有画在画布上的东西都很模糊。我已经看过Stack上关于跨越坐标的其他答案：

而不是：

context.moveTo（10,0）;

context.lineTo（10,30）;

执行此操作：

context.moveTo（10.5,0）;

context.lineTo（10.5,30）;

我尝试了这个，但实际上让我的线条更加模糊......

以下是我的问题的图片：

正如你可以看到的那样，左边的线条（绘制到画布上）比普通的CSS线条模糊得多。

这是我的标记和JS：

HTML：

<canvas id="canvas" width="300px" height="300px"></canvas>

JS：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(40, 40);
ctx.lineTo(40, 140);
ctx.strokeStyle = "#0499ff";
ctx.lineWidth = 10;

ctx.stroke();

希望这是足够的信息。我真的很想了解这个问题！提前致谢！ 小提琴：http://jsfiddle.net/7NLkH/

更新：

我也在macbook视网膜上......这可能是问题吗？如果是这样，有什么方法可以绕过模糊的线条？