Added simple resize function to canvas. Needs to be fixed with positioning of other elements

main.css

@@ -25,15 +25,7 @@
 
 #wrapper {
     margin: 0 auto;
+    width: 100%;
+    height: 600px;
 }
 
-.canvas-container {
-    margin: 0 auto;
-    width: 100% !important;
-}
-
-canvas {
-    margin: 0 auto;
-    max-width: 100% !important;
-    height: auto !important;
-}

src/js/components/ImageEditor/Canvas.js

@@ -31,6 +31,12 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         });
     },
 
+    resize: function (args) {
+        this.setHeight(args.height);
+        this.setWidth(args.width);
+        this.renderAll();
+    },
+
     get3dHandler: function () {
       return this.__3dHandler ||
           (this.__3dHandler = new ThreeDHandler(this));

src/js/init.js

@@ -2,6 +2,9 @@
 
 (function() {
     var $document = $(document);
+    var $window = $(window);
+    var $wrapper = $('#wrapper');
+
     // Inputs for the editor
     var $input = {
         w: $('#form-control input[name="w"]'),
@@ -62,6 +65,11 @@
         },
         SetBorder: function () {
             editor.canvas.getViewport().setFrame($(this).val());
+        },
+        handleResize: function() {
+            var width = $wrapper.width();
+            var height = $wrapper.height();
+            editor.canvas.resize({width: width, height: height});
         }
     };
 
@@ -80,4 +88,6 @@
         .on('PIE:dragbar-click', function(e, data) {
            console.log('Clicked on a dragbar! Axis: ' + data.axis);
         });
+    $window.on('resize', Event.handleResize);
+
 }());