javascript - CSS fixed grid (offsetting on scaling) -

i trying implement fixed size grid on html5 canvas. searched answers little luck before posting.

a grid drawn on canvas 'inner' grid. upon scaling/scrolling in odd ratios (1.1, 1.3, 1.6 etc..) thicker lines offset number of points. (i'm working in pt not px currently)

//tofixed(9) var pagewidth = math.round( units.topoint( $('.canvas').width() ) );  var gridsize1 = ( pagewidth / 6 ); //6 grids wide var gridsize2 = ( gridsize1 / 4 ); //4x4 inner grid 

my code generates css below using 2 variables.

at 100% (1) zoom canvas 793px / 594pt;

background: -webkit-linear-gradient(90deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 1pt, rgba(0,0,0,0) 1pt),-webkit-linear-gradient(90deg, black 1pt, rgba(0,0,0,0) 1pt),rgb(233, 233, 233); background-size: 99.16666666666667pt 99.16666666666667pt, 99.16666666666667pt 99.16666666666667pt, 24.791666666666668pt 24.791666666666668pt, 24.791666666666668pt 24.791666666666668pt; 

at 130% zoom (1.3) canvas 1031px / 773pt;

background: -webkit-linear-gradient(90deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 1pt, rgba(0,0,0,0) 1pt),-webkit-linear-gradient(90deg, black 1pt, rgba(0,0,0,0) 1pt),rgb(233, 233, 233); background-size: 128.83333333333334pt 128.83333333333334pt, 128.83333333333334pt 128.83333333333334pt, 32.208333333333336pt 32.208333333333336pt, 32.208333333333336pt 32.208333333333336pt; 

at 200% zoom (2) canvas 1586px / 1189pt;

background: -webkit-linear-gradient(90deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 2pt, rgba(0,0,0,0) 2pt),-webkit-linear-gradient(0deg, black 1pt, rgba(0,0,0,0) 1pt),-webkit-linear-gradient(90deg, black 1pt, rgba(0,0,0,0) 1pt),rgb(233, 233, 233); background-size: 198.33333333333334pt 198.33333333333334pt, 198.33333333333334pt 198.33333333333334pt, 49.583333333333336pt 49.583333333333336pt, 49.583333333333336pt 49.583333333333336pt; 

could advise going wrong here believe there silly missing? appears inner grid (4x4) moving around. (sorry increasing size of images!)

forget this!

i changed whole implementation use canvas drawing rather css gradients.