support device pixel ratio for crisp rendering on hidpi devices

src/header.js

@@ -215,7 +215,7 @@
 
     var UNSET_OPTION = {},
         getDefaults, createClass, SPFormat, clipval, quartile, normalizeValue, normalizeValues,
-        remove, isNumber, all, sum, addCSS, ensureArray, formatNumber, RangeMap,
+        remove, isNumber, all, sum, addCSS, getDevicePixelRatio, ensureArray, formatNumber, RangeMap,
         MouseHandler, Tooltip, barHighlightMixin,
         line, bar, tristate, discrete, bullet, pie, box, defaultStyles, initStyles,
         VShape, VCanvas_base, VCanvas_canvas, VCanvas_vml, pending, shapeCount = 0;

src/utils.js

@@ -222,3 +222,11 @@
         }
     };
 
+    getDevicePixelRatio = function() {
+      if (window.devicePixelRatio) return window.devicePixelRatio;
+      if (window.matchMedia) {
+        const mediaStr = '(min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)';
+        return window.matchMedia(mediaStr).matches ? 2 : 1;
+      }
+      return 1;
+    };

src/vcanvas-canvas.js

@@ -5,12 +5,13 @@
             if (target[0]) {
                 target = target[0];
             }
+            var dpi = this.dpi = getDevicePixelRatio();
             $.data(target, '_jqs_vcanvas', this);
             $(this.canvas).css({ display: 'inline-block', width: width, height: height, verticalAlign: 'top' });
             this._insert(this.canvas, target);
             this._calculatePixelDims(width, height, this.canvas);
-            this.canvas.width = this.pixelWidth;
-            this.canvas.height = this.pixelHeight;
+            this.canvas.width = this.pixelWidth * dpi;
+            this.canvas.height = this.pixelHeight * dpi;
             this.interact = interact;
             this.shapes = {};
             this.shapeseq = [];
@@ -32,7 +33,7 @@
 
         reset: function () {
             var context = this._getContext();
-            context.clearRect(0, 0, this.pixelWidth, this.pixelHeight);
+            context.clearRect(0, 0, this.pixelWidth * this.dpi, this.pixelHeight * this.dpi);
             this.shapes = {};
             this.shapeseq = [];
             this.currentTargetShapeId = undefined;
@@ -176,7 +177,10 @@
                 shapeCount = shapeseq.length,
                 context = this._getContext(),
                 shapeid, shape, i;
-            context.clearRect(0, 0, this.pixelWidth, this.pixelHeight);
+            var dpi = this.dpi;
+            context.clearRect(0, 0, this.pixelWidth * dpi, this.pixelHeight * dpi);
+            context.save();
+            context.scale(dpi, dpi);
             for (i = 0; i < shapeCount; i++) {
                 shapeid = shapeseq[i];
                 shape = shapes[shapeid];
@@ -187,6 +191,7 @@
                 this.shapes = {};
                 this.shapeseq = [];
             }
+            context.restore();
         }
 
     });