Handle new FigureCanvasBase.device_pixel_ratio.

This is a corollary to
matplotlib/matplotlib#19126.

Author: QuLogic

ipympl/backend_nbagg.py

@@ -86,8 +86,11 @@ def export(self):
         # Figure width in pixels
         pwidth = (self.canvas.figure.get_figwidth() *
                   self.canvas.figure.get_dpi())
-        # Scale size to match widget on HiPD monitors
-        width = pwidth / self.canvas._dpi_ratio
+        # Scale size to match widget on HiDPI monitors.
+        if hasattr(self.canvas, 'device_pixel_ratio'):  # Matplotlib 3.5+
+            width = pwidth / self.canvas.device_pixel_ratio
+        else:
+            width = pwidth / self.canvas._dpi_ratio
         data = "<img src='data:image/png;base64,{0}' width={1}/>"
         data = data.format(b64encode(buf.getvalue()).decode('utf-8'), width)
         display(HTML(data))

js/src/mpl_widget.js

@@ -72,6 +72,9 @@ export class MPLCanvasModel extends widgets.DOMWidgetModel {
     send_initialization_message() {
         if (this.ratio != 1) {
             this.send_message('set_dpi_ratio', { dpi_ratio: this.ratio });
+            this.send_message('set_device_pixel_ratio', {
+                device_pixel_ratio: this.ratio,
+            });
         }
 
         this.send_message('send_image_mode');