foo.diff

diff --git a/js/app.js b/js/app.js
index 7698e14..205ef5b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,6 +5,7 @@ var Renderer = function(canvas) {
     this.$canvas.height = 1200;
     this.$canvas.style.width = "100%";
     this.$canvas.style.height = "100%";
+    this.pixel_ratio = 2;
 };
 
 Renderer.prototype = {
@@ -45,26 +46,15 @@ Renderer.prototype = {
         this.context.closePath();
     },
 
-    scaleCanvas: function($container, width, height) {
-        var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
-        var border_height = parseInt(getComputedStyle($container)['border-top-width'], 10) + parseInt(getComputedStyle($container)['border-bottom-width'], 10);
+    setDimensions: function(width, height) {
+        this.$canvas.width = width * this.pixel_ratio;
+        this.$canvas.height = height * this.pixel_ratio;
 
-        var padding_width = parseInt(getComputedStyle($container)['padding-left'], 10) + parseInt(getComputedStyle($container)['padding-right'], 10);
-        var padding_height = parseInt(getComputedStyle($container)['padding-top'], 10) + parseInt(getComputedStyle($container)['padding-bottom'], 10);
-
-        var pixel_ratio = 2;
-
-        var total_width = border_width + padding_width;
-        var total_height = border_height + padding_height;
-
-        this.$canvas.width = (width - total_width) * pixel_ratio;
-        this.$canvas.height = (height - total_height) * pixel_ratio;
-
-        this.$canvas.style.width = (width - total_width);
-        this.$canvas.style.height = (height - total_height);
+        this.$canvas.style.width = width;
+        this.$canvas.style.height = height;
 
         // changing the canvas width or height re-initializes the canvas' state, including transforms and fill colors
-        this.init(pixel_ratio);
+        this.init(this.pixel_ratio);
     }
 };
 
@@ -86,17 +76,35 @@ var getHeight = function() {
     return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 };
 
+var getCanvasWidthAndHeight = function($container) {
+    var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
+    var border_height = parseInt(getComputedStyle($container)['border-top-width'], 10) + parseInt(getComputedStyle($container)['border-bottom-width'], 10);
+
+    var padding_width = parseInt(getComputedStyle($container)['padding-left'], 10) + parseInt(getComputedStyle($container)['padding-right'], 10);
+    var padding_height = parseInt(getComputedStyle($container)['padding-top'], 10) + parseInt(getComputedStyle($container)['padding-bottom'], 10);
+
+    var pixel_ratio = 2;
+
+    var total_width = border_width + padding_width;
+    var total_height = border_height + padding_height;
+
+    return { width: getWidth() - total_width, height: getHeight() - total_height };
+};
+
 var draw = function() {
     renderer.context.fillStyle = "#F00";
     renderer.context.fillText('Hello!', getWidth() / 2, getHeight() / 2);
 };
 
+var content_size = getCanvasWidthAndHeight($container);
+
 renderer.init();
-renderer.scaleCanvas($container, getWidth(), getHeight());
+renderer.setDimensions(content_size.width, content_size.height);
 draw();
 
 window.addEventListener('resize', function(event) {
-    renderer.scaleCanvas($container, getWidth(), getHeight());
+    var content_size = getCanvasWidthAndHeight($container);
+    renderer.setDimensions(content_size.width, content_size.height);
     draw();
  }, false);
 
diff --git a/js/maps/solar_system.js b/js/maps/solar_system.js
index 826ed76..eb13069 100644
--- a/js/maps/solar_system.js
+++ b/js/maps/solar_system.js
@@ -64,5 +64,4 @@ SolarSystem.prototype = {
     }
 };
 
-// es6 !!
-module.exports = new SolarSystem();
\ No newline at end of file
+module.exports = new SolarSystem();
diff --git a/js/rendering/canvas.js b/js/rendering/canvas.js
index f687adc..024c91f 100644
--- a/js/rendering/canvas.js
+++ b/js/rendering/canvas.js
@@ -4,6 +4,7 @@ var Renderer = function(canvas) {
     this.$canvas.height = 1200;
     this.$canvas.style.width = "100%";
     this.$canvas.style.height = "100%";
+    this.pixel_ratio = 2;
 };
 
 Renderer.prototype = {
@@ -44,26 +45,15 @@ Renderer.prototype = {
         this.context.closePath();
     },
 
-    scaleCanvas: function($container, width, height) {
-        var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
-        var border_height = parseInt(getComputedStyle($container)['border-top-width'], 10) + parseInt(getComputedStyle($container)['border-bottom-width'], 10);
+    setDimensions: function(width, height) {
+        this.$canvas.width = width * this.pixel_ratio;
+        this.$canvas.height = height * this.pixel_ratio;
 
-        var padding_width = parseInt(getComputedStyle($container)['padding-left'], 10) + parseInt(getComputedStyle($container)['padding-right'], 10);
-        var padding_height = parseInt(getComputedStyle($container)['padding-top'], 10) + parseInt(getComputedStyle($container)['padding-bottom'], 10);
-
-        var pixel_ratio = 2;
-
-        var total_width = border_width + padding_width;
-        var total_height = border_height + padding_height;
-
-        this.$canvas.width = (width - total_width) * pixel_ratio;
-        this.$canvas.height = (height - total_height) * pixel_ratio;
-
-        this.$canvas.style.width = (width - total_width);
-        this.$canvas.style.height = (height - total_height);
+        this.$canvas.style.width = width;
+        this.$canvas.style.height = height;
 
         // changing the canvas width or height re-initializes the canvas' state, including transforms and fill colors
-        this.init(pixel_ratio);
+        this.init(this.pixel_ratio);
     }
 };
 
diff --git a/js/views/main.js b/js/views/main.js
index 9613982..c45a4fd 100644
--- a/js/views/main.js
+++ b/js/views/main.js
@@ -13,17 +13,35 @@ var getHeight = function() {
     return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 };
 
+var getCanvasWidthAndHeight = function($container) {
+    var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
+    var border_height = parseInt(getComputedStyle($container)['border-top-width'], 10) + parseInt(getComputedStyle($container)['border-bottom-width'], 10);
+
+    var padding_width = parseInt(getComputedStyle($container)['padding-left'], 10) + parseInt(getComputedStyle($container)['padding-right'], 10);
+    var padding_height = parseInt(getComputedStyle($container)['padding-top'], 10) + parseInt(getComputedStyle($container)['padding-bottom'], 10);
+
+    var pixel_ratio = 2;
+
+    var total_width = border_width + padding_width;
+    var total_height = border_height + padding_height;
+
+    return { width: getWidth() - total_width, height: getHeight() - total_height };
+};
+
 var draw = function() {
     renderer.context.fillStyle = "#F00";
     renderer.context.fillText('Hello!', getWidth() / 2, getHeight() / 2);
 };
 
+var content_size = getCanvasWidthAndHeight($container);
+
 renderer.init();
-renderer.scaleCanvas($container, getWidth(), getHeight());
+renderer.setDimensions(content_size.width, content_size.height);
 draw();
 
 window.addEventListener('resize', function(event) {
-    renderer.scaleCanvas($container, getWidth(), getHeight());
+    var content_size = getCanvasWidthAndHeight($container);
+    renderer.setDimensions(content_size.width, content_size.height);
     draw();
  }, false);
 
diff --git a/js/views/main.jsx b/js/views/main.jsx
index 9613982..c45a4fd 100644
--- a/js/views/main.jsx
+++ b/js/views/main.jsx
@@ -13,17 +13,35 @@ var getHeight = function() {
     return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 };
 
+var getCanvasWidthAndHeight = function($container) {
+    var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
+    var border_height = parseInt(getComputedStyle($container)['border-top-width'], 10) + parseInt(getComputedStyle($container)['border-bottom-width'], 10);
+
+    var padding_width = parseInt(getComputedStyle($container)['padding-left'], 10) + parseInt(getComputedStyle($container)['padding-right'], 10);
+    var padding_height = parseInt(getComputedStyle($container)['padding-top'], 10) + parseInt(getComputedStyle($container)['padding-bottom'], 10);
+
+    var pixel_ratio = 2;
+
+    var total_width = border_width + padding_width;
+    var total_height = border_height + padding_height;
+
+    return { width: getWidth() - total_width, height: getHeight() - total_height };
+};
+
 var draw = function() {
     renderer.context.fillStyle = "#F00";
     renderer.context.fillText('Hello!', getWidth() / 2, getHeight() / 2);
 };
 
+var content_size = getCanvasWidthAndHeight($container);
+
 renderer.init();
-renderer.scaleCanvas($container, getWidth(), getHeight());
+renderer.setDimensions(content_size.width, content_size.height);
 draw();
 
 window.addEventListener('resize', function(event) {
-    renderer.scaleCanvas($container, getWidth(), getHeight());
+    var content_size = getCanvasWidthAndHeight($container);
+    renderer.setDimensions(content_size.width, content_size.height);
     draw();
  }, false);