Grid drawn using a element looking stretched

Question

I\'m trying to draw a grid on a element with the ultimate goal of making a Go board.

For some reason the grid is looking stretched, with

Answer 1

Please try it outside jsfiddle, maybe jsfiddle is applying some linear transformation.

Also please make sure that you add 0.5 everywhere to both x and y coordinates. Alternatively, you can apply translate(0.5, 0.5) to shift all coordinates by half a pixel.