Я пытаюсь нарисовать сетку с элементом <canvas> с конечной целью сделать Go board.
По какой-то причине сетка выглядит растянутой, причем линии имеют толщину более 1 пикселя, а интервал полностью неправильный. Он даже не начинается в позиции (10,10).
Было бы здорово, если бы кто-нибудь мог взглянуть на меня, скажите мне, что я делаю неправильно.
Я нашел проблему. Я устанавливал размеры <canvas> с помощью CSS, когда вам действительно нужно устанавливать атрибуты ширины и высоты. Это заставляло его растягиваться/перекоситься.
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
Попробуйте его вне jsfiddle, возможно, jsfiddle применяет некоторые линейные преобразования.
Кроме того, убедитесь, что вы добавили 0,5 везде к координатам x и y. Кроме того, вы можете применить translate (0.5, 0.5), чтобы сдвинуть все координаты на пол-пикселя.