Expose the view's pixel-ratio and resolution through View#pixelRatio and View#resolution

src/canvas/CanvasProvider.js

@@ -15,19 +15,19 @@
 var CanvasProvider = {
 	canvases: [],
 
-	getCanvas: function(width, height, ratio) {
+	getCanvas: function(width, height, pixelRatio) {
 		var canvas,
 			init = true;
 		if (typeof width === 'object') {
-			ratio = height;
+			pixelRatio = height;
 			height = width.height;
 			width = width.width;
 		}
-		if (!ratio) {
-			ratio = 1;
-		} else if (ratio !== 1) {
-			width *= ratio;
-			height *= ratio;
+		if (!pixelRatio) {
+			pixelRatio = 1;
+		} else if (pixelRatio !== 1) {
+			width *= pixelRatio;
+			height *= pixelRatio;
 		}
 		if (this.canvases.length) {
 			canvas = this.canvases.pop();
@@ -52,8 +52,8 @@ var CanvasProvider = {
 		}
 		// We save on retrieval and restore on release.
 		ctx.save();
-		if (ratio !== 1)
-			ctx.scale(ratio, ratio);
+		if (pixelRatio !== 1)
+			ctx.scale(pixelRatio, pixelRatio);
 		return canvas;
 	},
 

src/item/Item.js

@@ -3509,7 +3509,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 			// it, instead of the mainCtx.
 			mainCtx = ctx;
 			ctx = CanvasProvider.getContext(
-					bounds.getSize().ceil().add(new Size(1, 1)), param.ratio);
+					bounds.getSize().ceil().add(new Size(1, 1)),
+					param.pixelRatio);
 		}
 		ctx.save();
 		// If drawing directly, handle opacity and native blending now,
@@ -3541,8 +3542,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 			// opacity.
 			BlendMode.process(blendMode, ctx, mainCtx, opacity,
 					// Calculate the pixel offset of the temporary canvas to the
-					// main canvas. We also need to factor in the pixel ratio.
-					itemOffset.subtract(prevOffset).multiply(param.ratio));
+					// main canvas. We also need to factor in the pixel-ratio.
+					itemOffset.subtract(prevOffset).multiply(param.pixelRatio));
 			// Return the temporary context, so it can be reused
 			CanvasProvider.release(ctx);
 			// Restore previous offset.

src/project/Project.js

@@ -424,7 +424,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
 	 * @type Symbol[]
 	 */
 
-	draw: function(ctx, matrix, ratio) {
+	draw: function(ctx, matrix, pixelRatio) {
 		// Increase the _updateVersion before the draw-loop. After that, items
 		// that are visible will have their _updateVersion set to the new value.
 		this._updateVersion++;
@@ -434,7 +434,7 @@ var Project = PaperScopeItem.extend(/** @lends Project# */{
 		// values
 		var param = new Base({
 			offset: new Point(0, 0),
-			ratio: ratio,
+			pixelRatio: pixelRatio,
 			// Tell the drawing routine that we want to track nested matrices
 			// in param.transforms, and that we want it to set _globalMatrix
 			// as used below. Item#rasterize() and Raster#getAverageColor() do

src/ui/CanvasView.js

@@ -45,7 +45,7 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
 		this._context = canvas.getContext('2d');
 		// Have Item count installed mouse events.
 		this._eventCounters = {};
-		this._ratio = 1;
+		this._pixelRatio = 1;
 /*#*/ if (__options.environment == 'browser') {
 		if (PaperScope.getAttribute(canvas, 'hidpi') !== 'off') {
 			// Hi-DPI Canvas support based on:
@@ -53,7 +53,7 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
 			var deviceRatio = window.devicePixelRatio || 1,
 				backingStoreRatio = DomElement.getPrefixValue(this._context,
 						'backingStorePixelRatio') || 1;
-			this._ratio = deviceRatio / backingStoreRatio;
+			this._pixelRatio = deviceRatio / backingStoreRatio;
 		}
 /*#*/ } // __options.environment == 'browser'
 		View.call(this, canvas);
@@ -62,18 +62,18 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
 	_setViewSize: function(size) {
 		var width = size.width,
 			height = size.height,
-			ratio = this._ratio,
+			pixelRatio = this._pixelRatio,
 			element = this._element,
 			style = element.style;
 		// Upscale the canvas if the two ratios don't match.
-		element.width = width * ratio;
-		element.height = height * ratio;
-		if (ratio !== 1) {
+		element.width = width * pixelRatio;
+		element.height = height * pixelRatio;
+		if (pixelRatio !== 1) {
 			style.width = width + 'px';
 			style.height = height + 'px';
 			// Now scale the context to counter the fact that we've manually
 			// scaled our canvas element.
-			this._context.scale(ratio, ratio);
+			this._context.scale(pixelRatio, pixelRatio);
 		}
 	},
 
@@ -91,7 +91,7 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
 		var ctx = this._context,
 			size = this._viewSize;
 		ctx.clearRect(0, 0, size.width + 1, size.height + 1);
-		this._project.draw(ctx, this._matrix, this._ratio);
+		this._project.draw(ctx, this._matrix, this._pixelRatio);
 		this._project._needsUpdate = false;
 		return true;
 	}

src/ui/View.js

@@ -30,6 +30,9 @@ var View = Base.extend(Callback, /** @lends View# */{
 		this._element = element;
 		var size;
 /*#*/ if (__options.environment == 'browser') {
+		// Sub-classes may set _pixelRatio first
+		if (!this._pixelRatio)
+			this._pixelRatio = window.devicePixelRatio || 1;
 		// Generate an id for this view / element if it does not have one
 		this._id = element.getAttribute('id');
 		if (this._id == null)
@@ -60,7 +63,7 @@ var View = Base.extend(Callback, /** @lends View# */{
 			DomEvent.add(window, this._windowHandlers);
 		} else {
 			// Try visible size first, since that will help handling previously
-			// scaled canvases (e.g. when dealing with ratio)
+			// scaled canvases (e.g. when dealing with pixel-ratio)
 			size = DomElement.getSize(element);
 			// If the element is invisible, we cannot directly access
 			// element.width / height, because they would appear 0.
@@ -88,6 +91,9 @@ var View = Base.extend(Callback, /** @lends View# */{
 			document.body.appendChild(stats);
 		}
 /*#*/ } else if (__options.environment == 'node') {
+		// Sub-classes may set _pixelRatio first
+		if (!this._pixelRatio)
+			this._pixelRatio = 1;
 		// Generate an id for this view
 		this._id = 'view-' + View._id++;
 		size = new Size(element.width, element.height);
@@ -278,6 +284,32 @@ var View = Base.extend(Callback, /** @lends View# */{
 		return this._element;
 	},
 
+	/**
+	 * The ratio between physical pixels and device-independent pixels (DIPs)
+	 * of the underlying canvas / device.
+	 * It is {@code 1} for normal displays, and {@code 2} or more for
+	 * high-resolution displays.
+	 *
+	 * @type Number
+	 * @bean
+
+	 */
+	getPixelRatio: function() {
+		return this._pixelRatio;
+	},
+
+	/**
+	 * The resoltuion of the underlying canvas / device in pixel per inch (DPI).
+	 * It is {@code 72} for normal displays, and {@code 144} for high-resolution
+	 * displays with a pixel-ratio of {@code 2}.
+	 *
+	 * @type Number
+	 * @bean
+	 */
+	getResolution: function() {
+		return this._pixelRatio * 72;
+	},
+
 	/**
 	 * The size of the view. Changing the view's size will resize it's
 	 * underlying element.