0
HTML5キャンバス上に固定サイズのグリッドを実装しようとしています。投稿する前に少し運がある回答を探しました。CSS固定グリッド（スケーリング時オフセット）
グリッドはキャンバスの上に「内側」グリッドで描画されます。奇数の比率（1.1,1.3,1.6など）でスケーリング/スクロールすると、太い線はいくつかの点でオフセットされます。 （現在ptで作業中です）
//toFixed(9)
var pageWidth = Math.round(Units.toPoint($('.canvas').width()));
var gridSize1 = (pageWidth/6); //6 grids wide
var gridSize2 = (gridSize1/4); //4x4 inner grid
私のコードでは、以下の2つの変数を使用して以下のようなコードが生成されます。
100％（1）ズーム時のキャンバスは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;
130％ズーム（1.3）でのキャンバスは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;
200％でズーム（2）キャンバスは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;
私が行方不明です非常に愚かな何かがあると信じているように私はここで間違っつもりどこ誰もがアドバイスしてもらえますか？内側のグリッド（4x4）が少し動いているようです。 （画像のサイズが拡大して申し訳ありません）