trying to fix corpus map canvas resolution

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -25,7 +25,9 @@
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
     var _dpi = window.devicePixelRatio;
-    var _canvas_props = {
+    var _scene_props = {
+      width:0,
+      height:0,
       // 'margin_top':90, // with red border on head
       // 'margin_top':75, // without red border on head
       'margin_top':0,
@@ -95,10 +97,13 @@
       onResizeCanvas();
     };
     function onResizeCanvas() {
-      _canvas.style.width = window.innerWidth;
-      _canvas.style.height = window.innerHeight;
-      _canvas.width = window.innerWidth*_dpi;
-      _canvas.height = window.innerHeight*_dpi;
+      _dpi = 2;
+      _scene_props.width = window.innerWidth;
+      _scene_props.height = window.innerHeight;
+      _canvas.style.width = _scene_props.width+'px';
+      _canvas.style.height = _scene_props.height+'px';
+      _canvas.width = _scene_props.width*_dpi;
+      _canvas.height = _scene_props.height*_dpi;
       _ctx.scale(_dpi, _dpi);
 
 
@@ -159,7 +164,7 @@
     };
     function resizePhysics(){
       // attracters
-      _attracter.position = {x:_canvas.width/2, y:_canvas.height/2};
+      _attracter.position = {x:_scene_props.width/2, y:_scene_props.height/2};
     };
 
     //  _  _         _
@@ -258,19 +263,19 @@
           this.ori_p = _physics.makeParticle(1000, this.ori_pos.x, this.ori_pos.y);
           this.ori_p.fixed = true;
           // TODO: don't forget to move ori_p on window resize
-          this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _canvas.width*2);
+          this.ori_p_attract = _physics.makeAttraction(this.ori_p, this.p, 1000, _scene_props.width*2);
           this.ori_p_attract.on = false;
           // attracter
-          this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
+          this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _scene_props.width*2);
           this.attract.on = false;
         };
 
         Node.prototype.calcWallLimits = function(){
           this.wall_limits = {
-            top:    _canvas_props.margin_top  +this.r,
-            right:  _canvas.width  -_canvas_props.margin_right  -this.r,
-            bottom: _canvas.height -_canvas_props.margin_bottom -this.r,
-            left:   _canvas_props.margin_left +this.r
+            top:    _scene_props.margin_top  +this.r,
+            right:  _scene_props.width  -_scene_props.margin_right  -this.r,
+            bottom: _scene_props.height -_scene_props.margin_bottom -this.r,
+            left:   _scene_props.margin_left +this.r
           }
         };
 
@@ -423,13 +428,13 @@
           // if(this.id == 1)
           //   console.log('this.p.velocity', this.p.velocity);
           this.dist_to_attracter = this.p.distanceTo(_attracter);
-          if( this.dist_to_attracter < _canvas.width/4){
+          if( this.dist_to_attracter < _scene_props.width/4){
             if( this.p.velocity.length() > 0.4 ){
               this.p.velocity.multiplyScalar(0.995);
             }
           }
-          if( Math.abs(_attracter.position.x - this.x) > _canvas.width/3
-              || Math.abs(_attracter.position.y - this.y) > _canvas.height/3){
+          if( Math.abs(_attracter.position.x - this.x) > _scene_props.width/3
+              || Math.abs(_attracter.position.y - this.y) > _scene_props.height/3){
             this.attract.on = true;
           }else{
             this.attract.on = false;
@@ -441,7 +446,7 @@
           // this.fade();
           this.stopScrambling();
           this.unsetCentered();
-          this.ori_p.position.x = this.x < _canvas.width /2 ? this.wall_limits.left : this.wall_limits.right;
+          this.ori_p.position.x = this.x < _scene_props.width /2 ? this.wall_limits.left : this.wall_limits.right;
           this.ori_p_attract.on = true;
           this.wall_bouncing_elasticity = 0.15;
         }
@@ -1055,7 +1060,7 @@
     // |   / -_) ' \/ _` / -_) '_|
     // |_|_\___|_||_\__,_\___|_|
     function render(){
-      _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
+      _ctx.clearRect(0, 0, _scene_props.width, _scene_props.height);
 
       checkParticulesCollisions();