fix: do not cache devicePixelRatio

packages/vega-scenegraph/src/util/canvas/resize.js

@@ -2,14 +2,12 @@ function devicePixelRatio() {
   return typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 }
 
-var pixelRatio = devicePixelRatio();
-
 export default function(canvas, width, height, origin, scaleFactor, opt) {
   const inDOM = typeof HTMLElement !== 'undefined'
               && canvas instanceof HTMLElement
               && canvas.parentNode != null,
         context = canvas.getContext('2d'),
-        ratio = inDOM ? pixelRatio : scaleFactor;
+        ratio = inDOM ? devicePixelRatio() : scaleFactor;
 
   canvas.width = width * ratio;
   canvas.height = height * ratio;

packages/vega-view/src/View.js

@@ -18,6 +18,7 @@ import {getState, setState} from './state';
 import timer from './timer';
 import defaultTooltip from './tooltip';
 import trap from './trap';
+import watchPixelRatio from './watchPixelRatio';
 
 import {Dataflow, asyncCallback} from 'vega-dataflow';
 import {locale} from 'vega-format';
@@ -113,6 +114,9 @@ export default function View(spec, options) {
 
   // initialize DOM container(s) and renderer
   if (options.container) view.initialize(options.container, options.bind);
+
+  // based on https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes
+  if (options.watchPixelRatio) view.watchPixelRatio();
 }
 
 function lookupSignal(view, name) {
@@ -385,5 +389,8 @@ inherits(View, Dataflow, {
 
   // -- SAVE / RESTORE STATE ----
   getState,
-  setState
+  setState,
+
+  // RESIZE HANDLER
+  watchPixelRatio
 });

packages/vega-view/src/watchPixelRatio.js

@@ -0,0 +1,21 @@
+export default function() {
+    if (this.renderer() === 'canvas' && this._renderer._canvas) {
+      let remove = null;
+      const updatePixelRatio = () => {
+        if (remove != null) {
+          remove();
+        }
+        const media = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        media.addEventListener('change', updatePixelRatio);
+        remove = () => {
+          media.removeEventListener('change', updatePixelRatio);
+        };
+
+        this._renderer._canvas.getContext('2d').pixelRatio = window.devicePixelRatio || 1;
+        this._redraw = true;
+        this._resize = 1;
+        this.resize().runAsync();
+      };
+      updatePixelRatio();
+    }
+}