tsigel,
Видимая толщина в 2 пикселя происходит по причине интерполяции координат, потому что stroke обводит контур пути с обеих его сторон, т.е. половину толщины слева и половину справа. Например, ты рисуешь вертикальную линию с координатой x=100. Тогда в ширину она будет расположена между x=99.5 и x=100.5. Естественно, при этом захватывается два соседних пикселя, которые закрашиваются примерно с половинной непрозрачностью, и кажется что толщина линии равна 2. Поэтому, чтобы нарисовать линию, лежащую строго на одном пикселе, нужно использовать координаты вида N+0.5, где N - любое целое число.
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById( "canvas" ).getContext( "2d" );
ctx.lineWidth = 1;
// размытая линия
ctx.moveTo( 50, 50 );
ctx.lineTo( 50, 150 );
// четкая линия
ctx.moveTo( 150.5, 50 );
ctx.lineTo( 150.5, 150 );
ctx.stroke();
</script>
</body>
Вообще говоря, чтобы нарисовать четкую горизонтальную или вертикальную линию, постоянная координата должна быть равна N+0.5 при нечетной толщине линии, и N - при четной толщине.
Или можно обойтись простыми прямоугольниками, рисуя линии функцией fillRect.