在这种的jsfiddle有以1:1的线宽线。
http://jsfiddle.net/mailrox/9bMPD/350/
例如：
ctx.lineWidth = 1;
然而，当它在画布上绘制的线是2px的厚，你如何创建一个1px的粗线。
我可以绘制一个矩形（用1px的高度），但是我要线条也对角线工作。 那么，你如何让这条线是1px的高呢？
谢谢！
Answer 1:
帆布从像素的一半计算
ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);
所以，在开始一个半会解决它
修正版本： http://jsfiddle.net/9bMPD/357/
这个答案可以解释为什么它工作的方式。
Answer 2:
您还可以通过在X和Y方向半象素转换，然后使用全值的坐标（您可能需要一轮他们在某些情况下）：
context.translate(0.5, 0.5)
context.moveTo(5,5);
context.lineTo(55,5);
请记住，如果你调整你的画布的翻译将被重置 - 所以你必须重新翻译。
这个答案可以解释为什么它工作的方式。
Answer 3:
或者，正如这个答案的状态，得到宽度为1的，你需要在一个半像素启动。
ctx.moveTo(50.5,150.5);
ctx.lineTo(150.5,150.5);
http://jsfiddle.net/9bMPD/355/
Answer 4:
你看到的对谷歌第一击 ？ （搜索canvas line width 1px ）。 虽然我不得不承认这是不完全“干净”或“瘦肉精”。 渡轮Kobus'的解决方案要好得多。 话又说回来：吸收你需要首先用“半像素” ...
Answer 5:
画布可以画出干净的直线与fillRect（）。 与1px的高度或1px的宽度的矩形做这项工作。 它并不需要半像素值：
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.drawVerticalLine = function(left, top, width, color){
this.fillStyle=color;
this.fillRect(left, top, 1, width);
};
ctx.drawHorizontalLine = function(left, top, width, color){
this.fillStyle=color;
this.fillRect(left, top, width, 1);
}
ctx.drawVerticalLine(150, 0, 300, "green");
ctx.drawHorizontalLine(0, 150, 300, "red");
https://jsfiddle.net/ynur1rab/
Answer 6:
的fillRect（）方法可用于绘制在画布薄的水平或垂直线（而不必应用上坐标+0.5移）：
this.fillRect(left, top, 1, height);
this.fillRect(left, top, width, 1);
实际上，你可以让线甚至只是像更换验证码稀释剂：
this.fillRect(left, top, 0.7, height);
this.fillRect(left, top, width, 0.7);
线会更薄（趋向于达到1个象素宽），但是它们的颜色有点衰减。
- >工作示例
要注意的是，如果我们设置ctx.lineWidth = 0.7（对于古典beginPath方法/的moveTo /了lineTo /笔画顺序），它并没有在Chrome浏览器（0.7和1被解释的方法相同）。 因此，对于这个fillRect（）方法的兴趣。
Answer 7:
如果没有这些答案的为你工作，请检查您的浏览器缩放。 我的是不知何故在125％所以每第四1px的线条绘制的2px宽。
我花了几个小时试图找出为什么曾在互联网上每一个小提琴和我没有（变焦只是设置我的开发选项卡）
文章来源: Drawing a 1px thick line in canvas creates a 2px thick line
