Grid drawn using a <canvas> element looking stretched
Solution 1
I've found the problem. I was setting the dimensions of the <canvas>
using CSS, when you actually have to set the width and height attributes. This was causing it to be stretched/skewed.
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
http://jsfiddle.net/h2yJn/66/
Solution 2
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.
Acorn
Updated on January 14, 2020Comments
-
Acorn over 4 years
I'm trying to draw a grid on a
<canvas>
element with the ultimate goal of making a Go board.For some reason the grid is looking stretched, with the lines being thicker than 1 pixel and the spacing being completely wrong. It doesn't even start in the
(10,10)
position..It would be great if someone could take a look at tell me what I'm doing wrong.
http://jsfiddle.net/h2yJn/
-
Acorn over 13 yearsI'm getting the same result on jsbin.com, I'm pretty sure I've added 0.5px everywhere I could possibly add it. That wouldn't cause such dramatic effects anyway though would it?
-
Aleksandr Kravets over 9 yearsAnother way is just to start a cycle from 0.5 like this:
for (var i = 0.5; i < fieldSize+1; i+=40) {...