Когда я пытаюсь нарисовать черную линию с одним пикселем со следующим кодом:
context.strokeStyle = '#000';
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 1;
context.stroke();
context.closePath();
У меня есть более одной пиксельной линии с серой границей. Как это исправить?
Вот пример http://jsfiddle.net/z4VJq/
Вместо этого вызовите свою функцию с этими координатами: drawLine(30,30.5,300,30.5);. Попробуйте в jsFiddle.
Проблема в том, что ваш цвет будет на краю, поэтому цвет будет на полпути в пикселе над краем и на полпути ниже края. Если вы зададите позицию линии в середине целого числа, она будет нарисована в пределах линии пикселя.
Это изображение (из связанной статьи ниже) иллюстрирует это:
Подробнее об этом можно прочитать в Учебник по холсту: пример lineWidth.