diff --git a/lib/network/modules/Canvas.js b/lib/network/modules/Canvas.js index c378c183..ee2fd387 100644 --- a/lib/network/modules/Canvas.js +++ b/lib/network/modules/Canvas.js @@ -189,12 +189,7 @@ class Canvas { } else { let ctx = this.frame.canvas.getContext("2d"); - this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || - ctx.mozBackingStorePixelRatio || - ctx.msBackingStorePixelRatio || - ctx.oBackingStorePixelRatio || - ctx.backingStorePixelRatio || 1); - + this._setPixelRatio(ctx); this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0); } @@ -264,11 +259,7 @@ class Canvas { // update the pixel ratio let ctx = this.frame.canvas.getContext("2d"); let previousRatio = this.pixelRatio; // we cache this because the camera state storage needs the old value - this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || - ctx.mozBackingStorePixelRatio || - ctx.msBackingStorePixelRatio || - ctx.oBackingStorePixelRatio || - ctx.backingStorePixelRatio || 1); + this._setPixelRatio(ctx); if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) { this._getCameraState(previousRatio); @@ -296,26 +287,29 @@ class Canvas { // this would adapt the width of the canvas to the width from 100% if and only if // there is a change. + let newWidth = Math.round(this.frame.canvas.clientWidth * this.pixelRatio); + let newHeight = Math.round(this.frame.canvas.clientHeight * this.pixelRatio); + // store the camera if there is a change in size. - if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio) || this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) { + if (this.frame.canvas.width !== newWidth || this.frame.canvas.height !== newHeight) { this._getCameraState(previousRatio); } - if (this.frame.canvas.width != Math.round(this.frame.canvas.clientWidth * this.pixelRatio)) { - this.frame.canvas.width = Math.round(this.frame.canvas.clientWidth * this.pixelRatio); + if (this.frame.canvas.width !== newWidth) { + this.frame.canvas.width = newWidth; emitEvent = true; } - if (this.frame.canvas.height != Math.round(this.frame.canvas.clientHeight * this.pixelRatio)) { - this.frame.canvas.height = Math.round(this.frame.canvas.clientHeight * this.pixelRatio); + if (this.frame.canvas.height !== newHeight) { + this.frame.canvas.height = newHeight; emitEvent = true; } } if (emitEvent === true) { this.body.emitter.emit('resize', { - width:Math.round(this.frame.canvas.width / this.pixelRatio), - height:Math.round(this.frame.canvas.height / this.pixelRatio), - oldWidth: Math.round(oldWidth / this.pixelRatio), + width : Math.round(this.frame.canvas.width / this.pixelRatio), + height : Math.round(this.frame.canvas.height / this.pixelRatio), + oldWidth : Math.round(oldWidth / this.pixelRatio), oldHeight: Math.round(oldHeight / this.pixelRatio) }); @@ -330,6 +324,18 @@ class Canvas { }; + /** + * @private + */ + _setPixelRatio(ctx) { + this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio || + ctx.mozBackingStorePixelRatio || + ctx.msBackingStorePixelRatio || + ctx.oBackingStorePixelRatio || + ctx.backingStorePixelRatio || 1); + } + + /** * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) @@ -397,4 +403,4 @@ class Canvas { } -export default Canvas; \ No newline at end of file +export default Canvas;