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

#javascript #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();:


А это с ней:



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

Ответы

Ответ 1

При попытке нарисовать линию шириной в 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


Ответ 2

Судя по всему, размеры канваса вы задаете через стили, а надо через атрибуты элемента
canvas. 




В ином случае изображение растягивается из размера по умолчанию.

Еще одна особенность: на экранах retina удвоенное количество точек, поэтому размер
для таких экранов нужно уменьшать: в атрибутах ставить, например, width="200", а в
стилях width:100px

Добавлю:

Есть еще одна особенность, когда вы рисуете линию она появляется с координатами между
двумя пикселями. Поэтому вам нужно либо к вашим координатам прибавлять 0.5:

context.lineTo(x + 0.5, y + 0.5);


Или сделать так:

ctx.translate(0.5, 0.5);