Сетка, нарисованная с использованием элемента <canvas>, выглядит растянутой

Question

Я пытаюсь нарисовать сетку на элементе <canvas> с конечной целью сделать доску Go .

По какой-то причине сетка выглядит растянутой, слинии толщиной более 1 пикселя, а расстояние между ними совершенно неверное.Он даже не начинается с позиции (10,10).

Было бы здорово, если бы кто-нибудь взглянул на меня и сказал, что я делаю неправильно.

http://jsfiddle.net/h2yJn/

Answer 1

Я нашел проблему. Я устанавливал размеры <canvas> с помощью CSS, когда вам действительно нужно установить атрибуты width и height. Это заставляло его быть растянутым / перекошенным.

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');

http://jsfiddle.net/h2yJn/66/

Answer 2

Пожалуйста, попробуйте за пределами jsfiddle, возможно, jsfiddle применяет некоторое линейное преобразование.

Также, пожалуйста, убедитесь, что вы добавляете 0.5 везде к координатам x и y. Кроме того, вы можете применить translate (0.5, 0.5), чтобы сдвинуть все координаты на половину пикселя.