diff --git a/dist/image-editor.js b/dist/image-editor.js
index 46d4feb..eecd485 100644
--- a/dist/image-editor.js
+++ b/dist/image-editor.js
@@ -703,7 +703,9 @@ var DragHandle = function (handler) {
     };
 
     this.init = function () {
-        var viewportData = this.getCanvas().getViewport().getData();
+        var viewport = this.getCanvas().getViewport();
+        var viewportData = viewport.getData();
+        var frameHandler = viewport.getFrameHandler();
         var tracks = handler.getTracks();
 
         if (this.__handles) {
@@ -711,9 +713,15 @@ var DragHandle = function (handler) {
             this.getCanvas().remove(this.__handles.y);
         }
 
+        var frameWidth = frameHandler.getFrameSize();
+        var frameType = frameHandler.getFrameType();
+
+        var handleWidth = frameType == 'image' ? viewportData.width - frameWidth * 2 : viewportData.width;
+        var handleHeight = frameType == 'image'  ? viewportData.height - frameWidth * 2 : viewportData.height;
+
         this.__handles = {
-            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
-            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
+            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, handleWidth),
+            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight)
         };
 
         this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
@@ -952,6 +960,7 @@ var config = require('./config');
 function FrameHandler(viewport) {
     var _frames;
     var _frameType = viewport.canvas.__canvasFrameType;
+    var _frameSize;
 
     function getFramesAsArray() {
         return [
@@ -990,6 +999,10 @@ function FrameHandler(viewport) {
         return _frameType;
     };
 
+    this.getFrameSize = function() {
+        return _frameSize;
+    };
+
     this.setVisible = function (isVisible) {
         isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
 
@@ -1018,6 +1031,7 @@ function FrameHandler(viewport) {
         }
 
         if (frameType === 'none') {
+            viewport.canvas.getDragbars().apply();
             return this.setVisible(false);
         }
 
@@ -1028,23 +1042,25 @@ function FrameHandler(viewport) {
         });
 
         var vpData = viewport.getData();
-        var frameSize = 29;
+        var realFrameSize = 29; // Actual real life frame size width in mm.
         if (vpData.dim.units === 'inch') {
-            frameSize /= 2.54;
+            realFrameSize /= 2.54;
         }
 
+        _frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;
+
         _frames.top.height =
             _frames.bottom.height =
                 _frames.right.width =
-                    _frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX;
+                    _frames.left.width = _frameSize;
 
         _frames.top.width = _frames.bottom.width = vpData.width;
         _frames.right.height = _frames.left.height = vpData.height;
 
         if (frameType === 'image') {
-            _frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
+            _frames.top.width -= _frameSize * 2;
             _frames.bottom.width = _frames.top.width;
-            _frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
+            _frames.right.height -= _frameSize * 2;
             _frames.left.height = _frames.right.height;
 
             _frames.top.set({
@@ -1079,7 +1095,7 @@ function FrameHandler(viewport) {
                 left: (bounds.left - _frames.left.width) + 1
             }).centerV().setCoords();
         }
-
+        viewport.canvas.getDragbars().apply();
         viewport.canvas.renderAll();
 
         return this;
diff --git a/src/DragHandle.js b/src/DragHandle.js
index 96036df..7238029 100644
--- a/src/DragHandle.js
+++ b/src/DragHandle.js
@@ -97,7 +97,9 @@ var DragHandle = function (handler) {
     };
 
     this.init = function () {
-        var viewportData = this.getCanvas().getViewport().getData();
+        var viewport = this.getCanvas().getViewport();
+        var viewportData = viewport.getData();
+        var frameHandler = viewport.getFrameHandler();
         var tracks = handler.getTracks();
 
         if (this.__handles) {
@@ -105,9 +107,15 @@ var DragHandle = function (handler) {
             this.getCanvas().remove(this.__handles.y);
         }
 
+        var frameWidth = frameHandler.getFrameSize();
+        var frameType = frameHandler.getFrameType();
+
+        var handleWidth = frameType == 'image' ? viewportData.width - frameWidth * 2 : viewportData.width;
+        var handleHeight = frameType == 'image'  ? viewportData.height - frameWidth * 2 : viewportData.height;
+
         this.__handles = {
-            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width),
-            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height)
+            x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, handleWidth),
+            y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight)
         };
 
         this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
diff --git a/src/FrameHandler.js b/src/FrameHandler.js
index 71c0b7a..276af24 100644
--- a/src/FrameHandler.js
+++ b/src/FrameHandler.js
@@ -6,6 +6,7 @@ var config = require('./config');
 function FrameHandler(viewport) {
     var _frames;
     var _frameType = viewport.canvas.__canvasFrameType;
+    var _frameSize;
 
     function getFramesAsArray() {
         return [
@@ -44,6 +45,10 @@ function FrameHandler(viewport) {
         return _frameType;
     };
 
+    this.getFrameSize = function() {
+        return _frameSize;
+    };
+
     this.setVisible = function (isVisible) {
         isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
 
@@ -72,6 +77,7 @@ function FrameHandler(viewport) {
         }
 
         if (frameType === 'none') {
+            viewport.canvas.getDragbars().apply();
             return this.setVisible(false);
         }
 
@@ -82,23 +88,25 @@ function FrameHandler(viewport) {
         });
 
         var vpData = viewport.getData();
-        var frameSize = 29;
+        var realFrameSize = 29; // Actual real life frame size width in mm.
         if (vpData.dim.units === 'inch') {
-            frameSize /= 2.54;
+            realFrameSize /= 2.54;
         }
 
+        _frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;
+
         _frames.top.height =
             _frames.bottom.height =
                 _frames.right.width =
-                    _frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX;
+                    _frames.left.width = _frameSize;
 
         _frames.top.width = _frames.bottom.width = vpData.width;
         _frames.right.height = _frames.left.height = vpData.height;
 
         if (frameType === 'image') {
-            _frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
+            _frames.top.width -= _frameSize * 2;
             _frames.bottom.width = _frames.top.width;
-            _frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2;
+            _frames.right.height -= _frameSize * 2;
             _frames.left.height = _frames.right.height;
 
             _frames.top.set({
@@ -133,7 +141,7 @@ function FrameHandler(viewport) {
                 left: (bounds.left - _frames.left.width) + 1
             }).centerV().setCoords();
         }
-
+        viewport.canvas.getDragbars().apply();
         viewport.canvas.renderAll();
 
         return this;