window.devicePixelRatio can be 1 or 2 on the same screen, leading to confusion when resizing a canvas

[urshofer]

Hi all -

The window.devicePixelRatio value is dependent on the zoom settings in the display settings of OSX. it can be 2 if the display is configure in a zoomed state (a.k.a large fonts), and 1 if it is configured to "more space" or run in the original size settings. window.devicePixelRatio is therefore quite a volatile value - can be 1 or 2 on the same display.

I have a scenario where I rescale a fixed size canvas by 25, 50, 100 and 200% (imagine a slider with a zoom factor). This works flawless if the _setElementSize function applies the style.width and style.height parameters. But this happens only for pixelRatio != 1.

I could of course apply the width and height properties from outside paper.js - but this could lead to confusion if the parameters are set from two positions and probably to race conditions.

As a quick workaround i've commented out the pixelRatio !== 1 check to make sure the style.width and style.height parameters are set in all cases.

	_setElementSize: function _setElementSize(width, height) {
		var pixelRatio = this._pixelRatio;
		_setElementSize.base.call(this, width * pixelRatio, height * pixelRatio);
		// if (pixelRatio !== 1) {
			var element = this._element,
				ctx = this._context;
			if (!PaperScope.hasAttribute(element, 'resize')) {
				var style = element.style;
				style.width = width + 'px';
				style.height = height + 'px';
			}
			ctx.restore();
			ctx.save();
			ctx.scale(pixelRatio, pixelRatio);
		// }
	},

Not sure if this creates troubles elsewhere, in my situation, it worked.