Ответ 1
Вместо этого вызовите свою функцию с этими координатами: drawLine(30,30.5,300,30.5);
. Попробуйте в jsFiddle.
Проблема в том, что ваш цвет будет на краю, поэтому цвет будет на полпути в пикселе над краем и на полпути ниже края. Если вы зададите позицию линии в середине целого числа, она будет нарисована в пределах линии пикселя.
Это изображение (из связанной статьи ниже) иллюстрирует это:
Подробнее об этом можно прочитать в Учебник по холсту: пример lineWidth.