matplotlib
diff --git a/‎lib/matplotlib/backends/backend_webagg_core.py
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/backend_webagg_core.py
+17-2Lines changed: 17 additions & 2 deletions b/‎lib/matplotlib/backends/backend_webagg_core.py
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/backend_webagg_core.py
+17-2Lines changed: 17 additions & 2 deletions
diff --git a/‎lib/matplotlib/backends/web_backend/mpl.js
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/mpl.js
+17-3Lines changed: 17 additions & 3 deletions b/‎lib/matplotlib/backends/web_backend/mpl.js
Copy file name to clipboardExpand all lines: lib/matplotlib/backends/web_backend/mpl.js
+17-3Lines changed: 17 additions & 3 deletions
@@ -158,6 +158,10 @@ def __init__(self, *args, **kwargs):
         # to the connected clients.
         self._current_image_mode = 'full'
 
+        # Store the DPI ratio of the browser.  This is the scaling that
+        # occurs automatically for all images on a HiDPI display.
+        self._dpi_ratio = 1
+
     def show(self):
         # show the figure window
         from matplotlib.pyplot import show
@@ -342,7 +346,7 @@ def handle_refresh(self, event):
 
     def handle_resize(self, event):
         x, y = event.get('width', 800), event.get('height', 800)
-        x, y = int(x), int(y)
+        x, y = int(x) * 2, int(y) * 2
         fig = self.figure
         # An attempt at approximating the figure size in pixels.
         fig.set_size_inches(x / fig.dpi, y / fig.dpi)
@@ -359,6 +363,17 @@ def handle_send_image_mode(self, event):
         # The client requests notification of what the current image mode is.
         self.send_event('image_mode', mode=self._current_image_mode)
 
+    def handle_set_dpi_ratio(self, event):
+        dpi_ratio = event.get('dpi_ratio', 1)
+        if dpi_ratio != self._dpi_ratio:
+            # We don't want to scale up the figure dpi more than once.
+            if not hasattr(self.figure, '_original_dpi'):
+                self.figure._original_dpi = self.figure.dpi
+            self.figure.dpi = dpi_ratio * self.figure._original_dpi
+            self._dpi_ratio = dpi_ratio
+            self._force_full = True
+            self.draw_idle()
+
     def send_event(self, event_type, **kwargs):
         self.manager._send_event(event_type, **kwargs)
 
@@ -444,7 +459,7 @@ def _get_toolbar(self, canvas):
         return toolbar
 
     def resize(self, w, h):
-        self._send_event('resize', size=(w, h))
+        self._send_event('resize', size=(w / self.canvas._dpi_ratio, h / self.canvas._dpi_ratio))
 
     def set_window_title(self, title):
         self._send_event('figure_label', label=title)
 
@@ -1,6 +1,7 @@
 /* Put everything inside the global mpl namespace */
 window.mpl = {};
 
+
 mpl.get_websocket_type = function() {
     if (typeof(WebSocket) !== 'undefined') {
         return WebSocket;
@@ -49,7 +50,7 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
     $(parent_element).append(this.root);
 
     this._init_header(this);
-    this._init_canvas(this);
+    ratio = this._init_canvas(this);
     this._init_toolbar(this);
 
     var fig = this;
@@ -59,6 +60,7 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
     this.ws.onopen =  function () {
             fig.send_message("supports_binary", {value: fig.supports_binary});
             fig.send_message("send_image_mode", {});
+            fig.send_message("set_dpi_ratio", {'dpi_ratio': ratio});
             fig.send_message("refresh", {});
         }
 
@@ -184,8 +186,9 @@ mpl.figure.prototype._init_canvas = function() {
         canvas_div.css('width', width)
         canvas_div.css('height', height)
 
-        canvas.attr('width', width);
-        canvas.attr('height', height);
+        canvas.attr('width', width * ratio);
+        canvas.attr('height', height * ratio);
+        canvas.attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
 
         rubberband.attr('width', width);
         rubberband.attr('height', height);
@@ -206,6 +209,17 @@ mpl.figure.prototype._init_canvas = function() {
     }
 
     window.setTimeout(set_focus, 100);
+
+    var backingStore = this.context.backingStorePixelRatio ||
+	this.context.webkitBackingStorePixelRatio ||
+	this.context.mozBackingStorePixelRatio ||
+	this.context.msBackingStorePixelRatio ||
+	this.context.oBackingStorePixelRatio ||
+	this.context.backingStorePixelRatio || 1;
+
+    var ratio = (window.devicePixelRatio || 1) / backingStore;
+
+    return ratio
 }
 
 mpl.figure.prototype._init_toolbar = function() {