foo.diff

diff --git a/js/app.js b/js/app.js
index d7c58ef..2b40830 100644
--- a/js/app.js
+++ b/js/app.js
@@ -45,17 +45,18 @@ Renderer.prototype = {
         this.context.closePath();
     },
 
-    scaleCanvas: function($container) {
+    scaleCanvas: function($container, width, height) {
         var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
 
         var pixel_ratio = 2;
 
-        this.$canvas.width = ($container.offsetWidth - border_width) * pixel_ratio;
-        this.$canvas.height = ($container.offsetHeight - border_width) * pixel_ratio;
+        this.$canvas.width = (width - border_width) * pixel_ratio;
+        this.$canvas.height = (height - border_width) * pixel_ratio;
 
-        this.$canvas.style.width = $container.offsetWidth;
-        this.$canvas.style.height = $container.offsetHeight;
+        this.$canvas.style.width = width;
+        this.$canvas.style.height = height;
 
+console.log(width, height);
         // changing the canvas width or height re-initializes the canvas' state, including transforms and fill colors
         this.init(pixel_ratio);
     }
@@ -71,12 +72,21 @@ var $canvas = document.getElementById('canvas');
 var renderer = new CanvasRenderer($canvas);
 var $container = document.getElementById('container')
 
-renderer.init();
-renderer.context.fillStyle = "#F00";
-renderer.context.fillText('Hello!', 300, 300);
+var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+var draw = function() {
+    renderer.init();
+    renderer.context.fillStyle = "#F00";
+    renderer.context.fillText('Hello!', 300, 300);
+};
+
+renderer.scaleCanvas($container, width, height);
+draw();
 
 window.addEventListener('resize', function(event) {
-    renderer.scaleCanvas($container);
+    renderer.scaleCanvas($container, width, height);
+    draw();
  }, false);
 
 },{"../rendering/canvas":1,"react":157}],3:[function(require,module,exports){
diff --git a/js/rendering/canvas.js b/js/rendering/canvas.js
index 8a95147..8448bf2 100644
--- a/js/rendering/canvas.js
+++ b/js/rendering/canvas.js
@@ -44,16 +44,16 @@ Renderer.prototype = {
         this.context.closePath();
     },
 
-    scaleCanvas: function($container) {
+    scaleCanvas: function($container, width, height) {
         var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
 
         var pixel_ratio = 2;
 
-        this.$canvas.width = ($container.offsetWidth - border_width) * pixel_ratio;
-        this.$canvas.height = ($container.offsetHeight - border_width) * pixel_ratio;
+        this.$canvas.width = (width - border_width) * pixel_ratio;
+        this.$canvas.height = (height - border_width) * pixel_ratio;
 
-        this.$canvas.style.width = $container.offsetWidth;
-        this.$canvas.style.height = $container.offsetHeight;
+        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);
diff --git a/js/views/main.js b/js/views/main.js
index a20091e..975b53f 100644
--- a/js/views/main.js
+++ b/js/views/main.js
@@ -5,10 +5,19 @@ var $canvas = document.getElementById('canvas');
 var renderer = new CanvasRenderer($canvas);
 var $container = document.getElementById('container')
 
-renderer.init();
-renderer.context.fillStyle = "#F00";
-renderer.context.fillText('Hello!', 300, 300);
+var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+var draw = function() {
+    renderer.init();
+    renderer.context.fillStyle = "#F00";
+    renderer.context.fillText('Hello!', 300, 300);
+};
+
+renderer.scaleCanvas($container, width, height);
+draw();
 
 window.addEventListener('resize', function(event) {
-    renderer.scaleCanvas($container);
+    renderer.scaleCanvas($container, width, height);
+    draw();
  }, false);
diff --git a/js/views/main.jsx b/js/views/main.jsx
index a20091e..975b53f 100644
--- a/js/views/main.jsx
+++ b/js/views/main.jsx
@@ -5,10 +5,19 @@ var $canvas = document.getElementById('canvas');
 var renderer = new CanvasRenderer($canvas);
 var $container = document.getElementById('container')
 
-renderer.init();
-renderer.context.fillStyle = "#F00";
-renderer.context.fillText('Hello!', 300, 300);
+var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+
+var draw = function() {
+    renderer.init();
+    renderer.context.fillStyle = "#F00";
+    renderer.context.fillText('Hello!', 300, 300);
+};
+
+renderer.scaleCanvas($container, width, height);
+draw();
 
 window.addEventListener('resize', function(event) {
-    renderer.scaleCanvas($container);
+    renderer.scaleCanvas($container, width, height);
+    draw();
  }, false);