diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js
index 078e4f55dd0a..c71b8074d9a1 100644
--- a/loleaflet/src/control/Control.ColumnHeader.js
+++ b/loleaflet/src/control/Control.ColumnHeader.js
@@ -39,8 +39,7 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 		this._setCanvasHeight();
 		this._canvasBaseHeight = this._canvasHeight;
 
-		var scale = this.canvasDPIScale();
-		this._canvasContext.scale(scale, scale);
+		this._canvasContext.scale(this._dpiScale, this._dpiScale);
 
 		this._headerHeight = this._canvasHeight;
 		L.Control.Header.colHeaderHeight = this._canvasHeight;
@@ -224,8 +223,7 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 			return;
 
 		ctx.save();
-		var scale = this.canvasDPIScale();
-		ctx.scale(scale, scale);
+		ctx.scale(this._dpiScale, this._dpiScale);
 		// background gradient
 		var selectionBackgroundGradient = null;
 		if (isHighlighted) {
@@ -290,8 +288,7 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 		var height = group.endPos - group.startPos;
 
 		ctx.save();
-		var scale = this.canvasDPIScale();
-		ctx.scale(scale, scale);
+		ctx.scale(this._dpiScale, this._dpiScale);
 
 		// clip mask
 		ctx.beginPath();
@@ -339,13 +336,12 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 		var ctx = this._cornerCanvasContext;
 		var ctrlHeadSize = this._groupHeadSize;
 		var levelSpacing = this._levelSpacing;
-		var scale = this.canvasDPIScale();
 
 		var startOrt = levelSpacing + (ctrlHeadSize + levelSpacing) * level;
-		var startPar = this._cornerCanvas.width / scale - (ctrlHeadSize + (L.Control.Header.rowHeaderWidth - ctrlHeadSize) / 2);
+		var startPar = this._cornerCanvas.width / this._dpiScale - (ctrlHeadSize + (L.Control.Header.rowHeaderWidth - ctrlHeadSize) / 2);
 
 		ctx.save();
-		ctx.scale(scale, scale);
+		ctx.scale(this._dpiScale, this._dpiScale);
 		ctx.fillStyle = this._hoverColor;
 		ctx.fillRect(startPar, startOrt, ctrlHeadSize, ctrlHeadSize);
 		ctx.strokeStyle = 'black';
@@ -532,8 +528,7 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 			return;
 		}
 
-		var scale = this.canvasDPIScale();
-		var rowOutlineWidth = this._cornerCanvas.width / scale - L.Control.Header.rowHeaderWidth - this._borderWidth;
+		var rowOutlineWidth = this._cornerCanvas.width / this._dpiScale - L.Control.Header.rowHeaderWidth - this._borderWidth;
 		if (pos.x <= rowOutlineWidth) {
 			// empty rectangle on the left select all
 			this._map.sendUnoCommand('.uno:SelectAll');
diff --git a/loleaflet/src/control/Control.Header.js b/loleaflet/src/control/Control.Header.js
index 225507e0eee0..1b711908b613 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -29,6 +29,7 @@ L.Control.Header = L.Control.extend({
 		this._hitResizeArea = false;
 		this._overHeaderArea = false;
 		this._hammer = null;
+		this._dpiScale = L.Util.getDpiScaleFactor(true);
 
 		this._selectionBackgroundGradient = [ '#3465A4', '#729FCF', '#004586' ];
 
@@ -585,12 +586,6 @@ L.Control.Header = L.Control.extend({
 		return Math.round(this._getParallelPos(this.converter(point)));
 	},
 
-	canvasDPIScale: function () {
-		var docLayer = this._map && this._map._docLayer;
-		var scale = docLayer && docLayer.canvasDPIScale ? docLayer.canvasDPIScale() : L.getDpiScaleFactor();
-		return scale;
-	},
-
 	_setCanvasSizeImpl: function (container, canvas, property, value, isCorner) {
 		if (!value) {
 			value = parseInt(L.DomUtil.getStyle(container, property));
@@ -599,15 +594,14 @@ L.Control.Header = L.Control.extend({
 			L.DomUtil.setStyle(container, property, value + 'px');
 		}
 
-		var scale = this.canvasDPIScale();
 		if (property === 'width') {
-			canvas.width = Math.floor(value * scale);
+			canvas.width = Math.floor(value * this._dpiScale);
 			if (!isCorner)
 				this._canvasWidth = value;
 			// console.log('Header._setCanvasSizeImpl: _canvasWidth' + this._canvasWidth);
 		}
 		else if (property === 'height') {
-			canvas.height = Math.floor(value * scale);
+			canvas.height = Math.floor(value * this._dpiScale);
 			if (!isCorner)
 				this._canvasHeight = value;
 			// console.log('Header._setCanvasSizeImpl: _canvasHeight' + this._canvasHeight);
@@ -730,17 +724,16 @@ L.Control.Header = L.Control.extend({
 			return;
 
 		ctx.save();
-		var scale = this.canvasDPIScale();
-		ctx.scale(scale, scale);
+		ctx.scale(this._dpiScale, this._dpiScale);
 
 		ctx.fillStyle = this._borderColor;
 		if (this._isColumn) {
-			var startY = this._cornerCanvas.height / scale - (L.Control.Header.colHeaderHeight + this._borderWidth);
+			var startY = this._cornerCanvas.height / this._dpiScale - (L.Control.Header.colHeaderHeight + this._borderWidth);
 			if (startY > 0)
 				ctx.fillRect(0, startY, this._cornerCanvas.width, this._borderWidth);
 		}
 		else {
-			var startX = this._cornerCanvas.width / scale - (L.Control.Header.rowHeaderWidth + this._borderWidth);
+			var startX = this._cornerCanvas.width / this._dpiScale - (L.Control.Header.rowHeaderWidth + this._borderWidth);
 			if (startX > 0)
 				ctx.fillRect(startX, 0, this._borderWidth, this._cornerCanvas.height);
 		}
diff --git a/loleaflet/src/control/Control.RowHeader.js b/loleaflet/src/control/Control.RowHeader.js
index 9ffa9623fe30..ca95e86eb447 100644
--- a/loleaflet/src/control/Control.RowHeader.js
+++ b/loleaflet/src/control/Control.RowHeader.js
@@ -39,8 +39,7 @@ L.Control.RowHeader = L.Control.Header.extend({
 		this._setCanvasWidth();
 		this._setCanvasHeight();
 
-		var scale = this.canvasDPIScale();
-		this._canvasContext.scale(scale, scale);
+		this._canvasContext.scale(this._dpiScale, this._dpiScale);
 		this._headerWidth = this._canvasWidth;
 		L.Control.Header.rowHeaderWidth = this._canvasWidth;
 
@@ -217,8 +216,7 @@ L.Control.RowHeader = L.Control.Header.extend({
 			return;
 
 		ctx.save();
-		var scale = this.canvasDPIScale();
-		ctx.scale(scale, scale);
+		ctx.scale(this._dpiScale, this._dpiScale);
 		// background gradient
 		var selectionBackgroundGradient = null;
 		if (isHighlighted) {
@@ -279,8 +277,7 @@ L.Control.RowHeader = L.Control.Header.extend({
 		var height = group.endPos - group.startPos;
 
 		ctx.save();
-		var scale = this.canvasDPIScale();
-		ctx.scale(scale, scale);
+		ctx.scale(this._dpiScale, this._dpiScale);
 
 		// clip mask
 		ctx.beginPath();
@@ -328,13 +325,12 @@ L.Control.RowHeader = L.Control.Header.extend({
 		var ctx = this._cornerCanvasContext;
 		var ctrlHeadSize = this._groupHeadSize;
 		var levelSpacing = this._levelSpacing;
-		var scale = this.canvasDPIScale();
 
 		var startOrt = levelSpacing + (ctrlHeadSize + levelSpacing) * level;
-		var startPar = this._cornerCanvas.height / scale - (ctrlHeadSize + (L.Control.Header.colHeaderHeight - ctrlHeadSize) / 2);
+		var startPar = this._cornerCanvas.height / this._dpiScale - (ctrlHeadSize + (L.Control.Header.colHeaderHeight - ctrlHeadSize) / 2);
 
 		ctx.save();
-		ctx.scale(scale, scale);
+		ctx.scale(this._dpiScale, this._dpiScale);
 		ctx.fillStyle = this._hoverColor;
 		ctx.fillRect(startOrt, startPar, ctrlHeadSize, ctrlHeadSize);
 		ctx.strokeStyle = 'black';