Рисовать одиночную пиксельную линию в холсте html5

Когда я пытаюсь нарисовать черную линию с одним пикселем со следующим кодом:

    context.strokeStyle = '#000'; 
    context.beginPath();
    context.moveTo(x1, y1); 
    context.lineTo(x2, y2);
    context.lineWidth = 1;
    context.stroke();
    context.closePath();

У меня есть более одной пиксельной линии с серой границей. Как это исправить?

Вот пример http://jsfiddle.net/z4VJq/

Ответы

Ответ 1

Вместо этого вызовите свою функцию с этими координатами: drawLine(30,30.5,300,30.5);. Попробуйте в jsFiddle.

Проблема в том, что ваш цвет будет на краю, поэтому цвет будет на полпути в пикселе над краем и на полпути ниже края. Если вы зададите позицию линии в середине целого числа, она будет нарисована в пределах линии пикселя.

Это изображение (из связанной статьи ниже) иллюстрирует это:

enter image description here

Подробнее об этом можно прочитать в Учебник по холсту: пример lineWidth.