Fix retina support on desktop browsers; add retina range selector

diff --git a/dygraph-utils.js b/dygraph-utils.js
index 73777b9..5c55855 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -734,13 +734,13 @@ Dygraph.getContextPixelRatio = function(context) {
                             context.mozBackingStorePixelRatio ||
                             context.msBackingStorePixelRatio ||
                             context.oBackingStorePixelRatio ||
-                            context.backingStorePixelRatio;
-    if (devicePixelRatio !== undefined &&
-        backingStorePixelRatio !== undefined) {
+                            context.backingStorePixelRatio || 1;
+    if (devicePixelRatio !== undefined) {
       return devicePixelRatio / backingStoreRatio;
     } else {
-      // If either value is undefined, the ratio is meaningless so we want to
-      // return 1.
+      // At least devicePixelRatio must be defined for this ratio to make sense.
+      // We default backingStoreRatio to 1: this does not exist on some browsers
+      // (i.e. desktop Chrome).
       return 1;
     }
   } catch (e) {

diff --git a/plugins/range-selector.js b/plugins/range-selector.js
index 717f850..5b9444c 100644 (file)
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -166,13 +166,19 @@ rangeSelector.prototype.updateVisibility_ = function() {
  * Resizes the range selector.
  */
 rangeSelector.prototype.resize_ = function() {
-  function setElementRect(canvas, rect) {
+  function setElementRect(canvas, context, rect) {
+    var canvasScale = Dygraph.getContextPixelRatio(context);
+
     canvas.style.top = rect.y + 'px';
     canvas.style.left = rect.x + 'px';
-    canvas.width = rect.w;
-    canvas.height = rect.h;
-    canvas.style.width = canvas.width + 'px';    // for IE
-    canvas.style.height = canvas.height + 'px';  // for IE
+    canvas.width = rect.w * canvasScale;
+    canvas.height = rect.h * canvasScale;
+    canvas.style.width = rect.w + 'px';
+    canvas.style.height = rect.h + 'px';
+
+    if(canvasScale != 1) {
+      context.scale(canvasScale, canvasScale);
+    }
   }
 
   var plotArea = this.dygraph_.layout_.getPlotArea();
@@ -188,8 +194,8 @@ rangeSelector.prototype.resize_ = function() {
     h: this.getOption_('rangeSelectorHeight')
   };
 
-  setElementRect(this.bgcanvas_, this.canvasRect_);
-  setElementRect(this.fgcanvas_, this.canvasRect_);
+  setElementRect(this.bgcanvas_, this.bgcanvas_ctx_, this.canvasRect_);
+  setElementRect(this.fgcanvas_, this.fgcanvas_ctx_, this.canvasRect_);
 };
 
 /**