with - dibujar lineas en canvas javascript

Grilla dibujada usando un elemento<canvas> buscando estirado

Question

Estoy tratando de dibujar una cuadrícula en un elemento <canvas> con el objetivo final de hacer un tablero Go .

Por alguna razón, la cuadrícula se ve estirada, con las líneas más gruesas que 1 píxel y el espacio completamente equivocado. Ni siquiera comienza en la posición (10,10) ..

Sería genial si alguien pudiera echar un vistazo y decirme qué estoy haciendo mal.

http://jsfiddle.net/h2yJn/

Answer 1

He encontrado el problema. Estaba configurando las dimensiones de las <canvas> usando CSS, cuando realmente tiene que configurar los atributos de ancho y alto. Esto estaba causando que se estirara / sesgara.

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

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

Answer 2

Por favor, inténtelo fuera de jsfiddle, tal vez jsfiddle esté aplicando alguna transformación lineal.

También asegúrese de agregar 0.5 en todas partes a las coordenadas x e y. Alternativamente, puede aplicar la conversión (0.5, 0.5) para cambiar todas las coordenadas en medio píxel.