Fixed bug where the network could flicker when the pixelRatio is not integer.

HISTORY.md

@@ -28,6 +28,7 @@ http://visjs.org
 - Fixed dataView support for storePositions.
 - Second click on node is no longer unselect.
 - Added releaseFunction to openCluster.
+- Fixed bug where the network could flicker when the pixelRatio is not integer.
 
 
 ## 2015-05-28, version 4.1.0

lib/network/modules/Canvas.js

@@ -208,8 +208,8 @@ class Canvas {
       this.frame.canvas.style.width = '100%';
       this.frame.canvas.style.height = '100%';
 
-      this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
-      this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
+      this.frame.canvas.width = Math.round(this.frame.canvas.clientWidth * this.pixelRatio);
+      this.frame.canvas.height = Math.round(this.frame.canvas.clientHeight * this.pixelRatio);
 
       this.options.width = width;
       this.options.height = height;
@@ -220,18 +220,23 @@ class Canvas {
       // this would adapt the width of the canvas to the width from 100% if and only if
       // there is a change.
 
-      if (this.frame.canvas.width != this.frame.canvas.clientWidth * this.pixelRatio) {
-        this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
+      if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio)) {
+        this.frame.canvas.width = Math.round(this.frame.canvas.clientWidth * this.pixelRatio);
         emitEvent = true;
       }
-      if (this.frame.canvas.height != this.frame.canvas.clientHeight * this.pixelRatio) {
-        this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
+      if (this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) {
+        this.frame.canvas.height = Math.round(this.frame.canvas.clientHeight * this.pixelRatio);
         emitEvent = true;
       }
     }
 
     if (emitEvent === true) {
-      this.body.emitter.emit('resize', {width:this.frame.canvas.width / this.pixelRatio, height:this.frame.canvas.height / this.pixelRatio, oldWidth: oldWidth / this.pixelRatio, oldHeight: oldHeight / this.pixelRatio});
+      this.body.emitter.emit('resize', {
+        width:Math.round(this.frame.canvas.width / this.pixelRatio),
+        height:Math.round(this.frame.canvas.height / this.pixelRatio),
+        oldWidth: Math.round(oldWidth / this.pixelRatio),
+        oldHeight: Math.round(oldHeight / this.pixelRatio)
+      });
     }
 
     return emitEvent;