fix the scale

geo.js

@@ -1,13 +1,8 @@
 //================= Canvas elements
 let staticLayer = document.getElementById('static');
-staticLayer.width = window.innerWidth;
-staticLayer.height = window.innerHeight;
 
 let beamLineLayer = document.getElementById('beamLine');
 
-let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
-let colorIndex = 0;
-
 function rotate(xy, center, rad){
   let haha = [xy[0]-center[0], xy[1]-center[1]];
   let kaka = [ haha[0]*Math.cos(rad) - haha[1]*Math.sin(rad),
@@ -30,7 +25,14 @@ class basicShape{
     this.shape = new Path2D();
     this.entracePos = [0,0];
     this.exitPos  = [0,0];
+    this.rad = 0;
   }
+
+  GetExitPos(d){
+    let l = [ - d * Math.sin(this.rad), - d * Math.cos(this.rad)];
+    return translate(this.exitPos, l);
+  }
+
   clear(){
     let ctx = this.layer.getContext('2d');
     ctx.save();
@@ -66,7 +68,7 @@ class beamLine extends basicShape{
     this.offset = 0;
     this.lineWidth = 10;
     
-    this.exitPos = [xy[0] + l, xy[1]]; 
+    this.exitPos = [xy[0], xy[1] - l]; 
     this.exitPos = rotate(this.exitPos, xy, rad);
 
     this.shape.moveTo(xy[0], xy[1]);
@@ -192,32 +194,68 @@ class BeamSpilter extends basicShape{
 
 }
 
+let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
+let colorIndex = 0;
+
+let color = {
+  BeamPipe : ['White', 'grey30'],
+  Dipole   : ['gold', 'gold4'],
+  Deflector : ['Orange', 'Orange4'],
+  Qpole :  ['Blue', 'Blue4'],
+  Detector : ['Yellow', 'Yellow4'],
+  LINAC : ['Cyan', 'Cyan4'],
+  Tandem : [ '#782F40', '#CEB888'],
+  Buncher : ['Ivory', 'Ivory4'],
+  SNICS : ['tan', 'tan4'],
+  RFsourcce : ['Olivedrab', 'Olivedrab4'],
+  Other : ['Black', 'Red'] 
+}
+
 ///========================= Sand Box;
 
-let windowSize = [staticLayer.width, staticLayer.height];
+//let windowSize = [staticLayer.width, staticLayer.height];
+let windowSize = [3840, 2160]; // 4K
+//let windowSize = [2000, 1000];
 
 let RFSource1 = new beamRectElement([windowSize[0]*0.9, windowSize[1]*0.8], 0, 40, 100);
 let RFSource2 = new beamRectElement(RFSource1.exitPos, 0, 40, 20);
 
-let s1 = new BeamSpilter(translate(RFSource2.exitPos, [0, -100]), 50, Math.PI);
+let s1 = new BeamSpilter(RFSource2.GetExitPos(120), 50, Math.PI);
 
-let b1S = new beamLine(RFSource2.exitPos, Math.PI *3/2, 200);
+let b1S = new beamLine(RFSource2.exitPos, 0, 200);
 
 let tandem = new tandemClass(b1S.exitPos, 100, 100);
-let b10 = new beamLine(tandem.exitPos, Math.PI *3/2, 100); b10.offset = 8;
+
+let b10 = new beamLine(tandem.exitPos, 0, 100); b10.offset = 8;
+let b10a = new beamLine(b10.exitPos, 0, 400); b10a.offset = 11;
+
+let q1 = new beamRectElement(tandem.GetExitPos(50), 0, 60, 60);
+let df1 = new beamRectElement(q1.GetExitPos(50), 0, 30, 40);
+let df2 = new beamRectElement(df1.GetExitPos(20), 0, 30, 40);
+
+
+
+RFSource1.draw(color.RFsourcce[0]);
+RFSource2.draw(color.RFsourcce[0]);
+b1S.draw(color.BeamPipe[0]);
+s1.draw(color.Dipole[0]);
+tandem.draw(color.Tandem[0]);
+b10.draw(color.BeamPipe[0]);
+b10a.draw(color.BeamPipe[1]);
+q1.draw(color.Qpole[0]);
+df1.draw(color.Deflector[0]);
+df2.draw(color.Deflector[0]);
+
+
+
 
 
-RFSource1.draw('Olivedrab');
-RFSource2.draw('Olivedrab');
-b1S.draw('red');
-s1.draw('gold');
-tandem.draw('#782F40');
-b10.draw('red');
 
 
 function lineMotion(){
   b1S.march('red');
   b10.march('red');
+  b10a.march('red');
   setTimeout(lineMotion, 20);
 }
 lineMotion();

testing.html

@@ -10,31 +10,26 @@
   body{
     background-color : black;
   }
-  canvas{
-    display:block;
-    border : 1px solid;
-  }
-
-  #CanvasArea{
-    position:relative;
-    z-index:1;
-    background-color: black;
-  }
 
   #iframe{
     position:absolute;
-    top : 700px;
-    left : 100px;
-    width:1000px;
-    height:400px;
+    top : 60%;
+    left : 10%;
+    width: 60%;
+    height: 35%;
     z-index:1000;
     border: 1px solid green;
   }
 
+  canvas{
+    width: 99%;
+    height:98%;
+    border: 1px solid yellow;
+  }
+
   #beamLine{
     position: absolute;
     z-index: 0;
-    background-color: black;
   }
 
   #static{
@@ -58,10 +53,8 @@
 
 <iframe src='https://fsunuc.physics.fsu.edu/grafana/' frameborder='2' id="iframe"></iframe>
 
-<div id="CanvasArea"> 
-  <canvas id='beamLine' width="3840", height="2160" > Your browser doe snot support HTML canvas</canvas>
-  <canvas id='static' width="3840", height="2160" > Your browser doe snot support HTML canvas</canvas>
-</div>
+<canvas width="3840" height="2160" id='beamLine' > Your browser doe snot support HTML canvas</canvas>
+<canvas width="3840" height="2160" id='static' > Your browser doe snot support HTML canvas</canvas>
 
 <p id='text'></p>