CANVAS絵画部分の表示のずれについて

お世話になります。

先日、以下のような質問をさせていただきました。

こちらの質問内容は解決し、実装は出来たのですが、問題が残っております。
作成したページは以下のようなLPです。

ページ途中にCANVASで要素間の点線を実装出来たのですが、
例えばブラウザにてこのページある程度進んだ箇所でリロードすると、CANVASの表示がずれ込んでしまいます。

ページの一番上でリロードすれば、正常に表示されます。
色々調べた上、CANVASの表示規則がCSSと違うということはわかりましたが、具体的な対処方法を探せませんでした。
このような事象にはどう対応したら良いでしょうか？

以下コードになります。実際のコードは業務のものになるので、HTMLはコンテンツ中身は記載できないので、構成だけわかるようにしています。

HTML（全体構成）

HTML
1<html>
2 <body>
3  <div id="canvas-container">
4    <canvas id="canvas"></canvas>
5     <header>
6     </header>
7     <main>
8      <div class="top">
9      </div>
10      <div class="contents1">
11      </div>
12　　  <div class="contents２">
13　　　　
14　　　 キャンバス表示箇所(円の部分は#Circle1~4)
15        
16     </div>
17 　　<div class="contents３">
18     </div>
19    </main>
20    <footer">
21    </footer>
22  </div>
23 <script src="script.js"></script>
24 </body>
25</html>
26

CSS（CANVAS部のみ）

CSS
1#canvas-container {
2  position:relative;
3  top:0;
4  left:0;
5  width:100%;
6  height: 100%;
7  overflow:hidden;
8}
9
10#canvas {
11  position: absolute;
12  left: 0;
13  top: 0;
14  z-index: -1;
15}

JS（CANVAS部のみ）

javaScript
1$(function () {
2	sizing();
3	onload();
4	$(window).resize(function() {
5		sizing();
6		onload();
7	});
8});
9
10function sizing(){
11	$('#canvas').attr({height:$('#canvas-container').height()});
12	$('#canvas ').attr({width:$('#canvas-container').width()});
13};
14
15window.onload = () => {
16  var canvas = document.getElementById("canvas")
17  var ctx = canvas.getContext("2d");
18
19    var a = document.getElementById("circle1").getBoundingClientRect();
20    var b = (a.bottom - a.top) / 2;
21    var c = (a.right - a.left) / 2;
22    var d = a.top + b;
23    var e = a.left + c;
24
25    var a2 = document.getElementById("circle2").getBoundingClientRect();
26    var b2 = (a2.bottom - a2.top) / 2;
27    var c2 = (a2.right - a2.left) / 2;
28    var d2 = a2.top + b2;
29    var e2 = a2.left + c2;
30
31    var a3 = document.getElementById("circle3").getBoundingClientRect();
32    var b3 = (a3.bottom - a3.top) / 2;
33    var c3 = (a3.right - a3.left) / 2;
34    var d3 = a3.top + b3;
35    var e3 = a3.left + c3;
36
37    var a4 = document.getElementById("circle4").getBoundingClientRect();
38    var b4 = (a4.bottom - a4.top) / 2;
39    var c4 = (a4.right - a4.left) / 2;
40    var d4 = a4.top + b4;
41    var e4 = a4.left + c4;
42
43    ctx.strokeStyle = "#ffba00";
44    ctx.lineWidth = 5;
45    ctx.beginPath();
46    ctx.moveTo(e, d);
47    ctx.lineTo(e2, d2);
48    ctx.moveTo(e2, d2);
49    ctx.lineTo(e3, d3);
50    ctx.moveTo(e3, d3);
51    ctx.lineTo(e4, d4);
52    ctx.setLineDash([5, 10]);
53    ctx.closePath();
54    ctx.stroke();
55  }
56