Как удалить сглаживание на элементе Canvas?

Есть такой код на javascript:
function updateGrid() { cntx.strokeStyle = 'white'; cntx.lineCap = 'butt'; cntx.lineWidth = 1; for(var x = 0; x < canvas.width; x++) { cntx.beginPath(); cntx.moveTo(x * cellSize + move.x, move.y); cntx.lineTo(x * cellSize + move.x, canvas.width * cellSize+move.y); cntx.stroke(); cntx.closePath() } }
Предполагается, что он нарисует canvas.width белых линий, толщиной в один пиксель. Но получается то, что на скриншоте:

На каком-то форуме прочитал, что может помочь убирание строчки cntx.beginPath();. Но без неё рисуется что-то еще более странное:

На другом форуме сказали, что ширина линии может быть меньше единицы. На следующей картинке ширина .0, без строки cntx.beginPath();:
А это с ней:

Скажите, как от этого избавиться?

Ответ

При попытке нарисовать линию шириной в 1px, используя координаты x=(1, 0); y=(1, 3); будет охвачено по 0.5px с каждой стороны линии, в результате чего, она будет иметь ширину 2px.
Это происходит из-за неспособности дисплея отобразить пол-пиксиля.


Для того, чтобы вывести линию шириной в 1px нужно вычислять коориданаты с пол- пикселя, т.е вместо x=(1, 0); y=(1, 3); будет x=(1.5, 0); y=(1.5, 3)
В результате браузер будет рисовать линию охватывая по 0.5px с каждой стороны, тем самым получая линию в 1px

Пример. Первая линия имеет цвет #ffffff, а вторая #808080. Разница только в координатах.

Различия в цветах происходят из-за сглаживания, которое упомянуто в вопросе.

Когда линия проходит через пол-пикселя, он окрашивается в серый цвет, иначе изображение будет зубчатым. Цвет пикселя выбирается в процессе сглаживания, при котором учитывается гамма. Пиксели будут окрашены в промежуточный цвет между цветом изображения и цветом фона.
Аналогичные действия происходят и в вашем случае.
В данном случае отключить сглаживание нельзя, это было бы возможно в случае использования drawImage

Canvas - Dive Into HTML5