WIP basic high pixel density support re: openseadragon/openseadragon#541

src/drawer.js

@@ -108,6 +108,13 @@ $.Drawer = function( options ) {
     // Note that this means overlays you want to be rtl need to be explicitly set to rtl.
     this.container.dir = 'ltr';
 
+    // check canvas available width and height, set canvas width and height such that the canvas backing store is set to the proper pixel density
+    if (this.useCanvas) {
+        var viewportSize = this._calculateCanvasSize();
+        this.canvas.width = viewportSize.x;
+        this.canvas.height = viewportSize.y;
+    }
+
     this.canvas.style.width     = "100%";
     this.canvas.style.height    = "100%";
     this.canvas.style.position  = "absolute";
@@ -215,7 +222,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     clear: function() {
         this.canvas.innerHTML = "";
         if ( this.useCanvas ) {
-            var viewportSize = this.viewport.getContainerSize();
+            var viewportSize = this._calculateCanvasSize();
             if( this.canvas.width != viewportSize.x ||
                 this.canvas.height != viewportSize.y ) {
                 this.canvas.width = viewportSize.x;
@@ -256,7 +263,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         if ( this.useCanvas ) {
             this.context.save();
             this.context.lineWidth = 2;
-            this.context.font = 'small-caps bold 13px ariel';
+            this.context.font = 'small-caps bold 13px arial';
             this.context.strokeStyle = this.debugGridColor;
             this.context.fillStyle = this.debugGridColor;
 
@@ -369,6 +376,16 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         tile.position.y = py;
 
         this.context.restore();
+    },
+
+    // private
+    _calculateCanvasSize: function() {
+        var pixelDensityRatio = $.pixelDensityRatio;
+        var viewportSize = this.viewport.getContainerSize();
+        return {
+            x: viewportSize.x * pixelDensityRatio,
+            y: viewportSize.y * pixelDensityRatio
+        };
     }
 };
 

src/openseadragon.js

@@ -816,6 +816,32 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
                     canvasElement.getContext( '2d' ) );
     }());
 
+    /**
+     * @private
+     * @inner
+     * @function
+     * @returns {Number} The device's pixel density ratio, or null if canvas isn't supported by the browser.
+     */
+    $.pixelDensityRatio = (function () {
+        if ( $.supportsCanvas ) {
+            var context = document.createElement('canvas').getContext('2d');
+            var devicePixelRatio = window.devicePixelRatio || 1;
+            var backingStoreRatio = context.webkitBackingStorePixelRatio ||
+                                    context.mozBackingStorePixelRatio ||
+                                    context.msBackingStorePixelRatio ||
+                                    context.oBackingStorePixelRatio ||
+                                    context.backingStorePixelRatio || 1;
+            return devicePixelRatio / backingStoreRatio;
+            // var viewportSize = this.viewport.getContainerSize();
+            // return {
+            //     x: viewportSize.x * canvasDensityRatio,
+            //     y: viewportSize.y * canvasDensityRatio,
+            //     ratio: canvasDensityRatio
+            // };
+        } else {
+            return 1;
+        }
+    }());
 
 }( OpenSeadragon ));
 

src/tiledimage.js

@@ -262,7 +262,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
 
     // private
     _viewportToImageDelta: function( viewerX, viewerY, current ) {
-        var scale = current ? this._scaleSpring.current.value : this._scaleSpring.target.value;
+        var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value) / $.pixelDensityRatio;
         return new $.Point(viewerX * (this.source.dimensions.x / scale),
             viewerY * ((this.source.dimensions.y * this.contentAspectX) / scale));
     },
@@ -294,7 +294,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
 
     // private
     _imageToViewportDelta: function( imageX, imageY, current ) {
-        var scale = current ? this._scaleSpring.current.value : this._scaleSpring.target.value;
+        var scale = (current ? this._scaleSpring.current.value : this._scaleSpring.target.value) / $.pixelDensityRatio;
         return new $.Point((imageX / this.source.dimensions.x) * scale,
             (imageY / this.source.dimensions.y / this.contentAspectX) * scale);
     },

src/viewport.js

@@ -897,6 +897,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     deltaPixelsFromPoints: function( deltaPoints, current ) {
         return deltaPoints.times(
             this._containerInnerSize.x * this.getZoom( current )
+        ).times(
+            $.pixelDensityRatio
         );
     },
 
@@ -908,6 +910,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
     deltaPointsFromPixels: function( deltaPixels, current ) {
         return deltaPixels.divide(
             this._containerInnerSize.x * this.getZoom( current )
+        ).divide(
+            $.pixelDensityRatio
         );
     },
 
@@ -928,6 +932,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             this._containerInnerSize.x / bounds.width
         ).plus(
             new $.Point(this._margins.left, this._margins.top)
+        ).times(
+            $.pixelDensityRatio
         );
     },
 
@@ -938,7 +944,9 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      */
     pointFromPixel: function( pixel, current ) {
         var bounds = this.getBounds( current );
-        return pixel.minus(
+        return pixel.divide(
+            $.pixelDensityRatio
+        ).minus(
             new $.Point(this._margins.left, this._margins.top)
         ).divide(
             this._containerInnerSize.x / bounds.width