diff --git a/lib/matplotlib/backends/web_backend/mpl.js b/lib/matplotlib/backends/web_backend/mpl.js
index 6f1cf79364cb..bcd645079385 100644
--- a/lib/matplotlib/backends/web_backend/mpl.js
+++ b/lib/matplotlib/backends/web_backend/mpl.js
@@ -40,7 +40,7 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
     this.rubberband_context = undefined;
     this.format_dropdown = undefined;
 
-    this.focus_on_mousover = false;
+    this.focus_on_mouseover = false;
 
     this.root = $('<div/>');
     this.root.attr('style', 'display: inline-block');
@@ -89,9 +89,6 @@ mpl.figure.prototype._init_canvas = function() {
     var fig = this;
 
     var canvas_div = $('<div/>');
-    canvas_div.resizable({ resize: mpl.debounce_resize(
-        function(event, ui) { fig.request_resize(ui.size.width, ui.size.height); }
-        , 50)});
 
     canvas_div.attr('style', 'position: relative; clear: both;');
     this.root.append(canvas_div);
@@ -109,8 +106,44 @@ mpl.figure.prototype._init_canvas = function() {
 
     var rubberband = $('<canvas/>');
     rubberband.attr('style', "position: absolute; left: 0; top: 0; z-index: 1;")
+
+    var ignore_mouse_events = false;
+
+    // The if statement below should just be implemented directly in CSS...
+    if (!$("head").hasClass("boxme"))
+    {
+        $("<style type='text/css'> .boxme { background-color: lightgray; border: 1px solid gray;} </style>").appendTo("head");
+    }
+
+    canvas_div.resizable({ 
+        start: function(event, ui) {
+            ignore_mouse_events = true;
+            ctx = fig.context;
+            var canvas = ctx.canvas;
+            canvas.blur(); // removes focus if focused (may need more work?)
+            canvas_div.addClass("boxme");
+           
+            /// Clearing the canvas
+            // Store the current transformation matrix
+            ctx.save();
+            // Use the identity matrix while clearing the canvas
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Restore the transform
+            ctx.restore();
+        },
+        stop: function(event, ui) { 
+            ignore_mouse_events = false;
+            fig.request_resize(ui.size.width, ui.size.height); 
+            canvas_div.removeClass("boxme");
+        },
+    });
+
     function mouse_event_fn(event) {
-        return fig.mouse_event(event, event['data']);
+        if (ignore_mouse_events == false)
+        {
+            return fig.mouse_event(event, event['data']);
+        }
     }
     rubberband.mousedown('button_press', mouse_event_fn);
     rubberband.mouseup('button_release', mouse_event_fn);
@@ -379,7 +412,7 @@ mpl.findpos = function(e) {
 };
 
 mpl.figure.prototype.mouse_event = function(event, name) {
-    var canvas_pos = mpl.findpos(event)
+    var canvas_pos = mpl.findpos(event);
 
     if (this.focus_on_mouseover && name === 'motion_notify')
     {