Make createTransformToString a standalone function

src/ol/has.js

@@ -45,6 +45,20 @@ export const DEVICE_PIXEL_RATIO = (function() {
   }
 })();
 
+/**
+ * The execution context is a window.
+ * @const
+ * @type {boolean}
+ */
+export const WINDOW = (function() {
+  try {
+    return 'document' in self;
+  } catch (e) {
+    // ancient browsers don't have `self`
+    return true;
+  }
+})();
+
 /**
  * Image.prototype.decode() is supported.
  * @type {boolean}

src/ol/render/canvas.js

@@ -6,6 +6,8 @@ import {createCanvasContext2D} from '../dom.js';
 import {clear} from '../obj.js';
 import BaseObject from '../Object.js';
 import EventTarget from '../events/Target.js';
+import {WINDOW} from '../has.js';
+import {toString} from '../transform.js';
 
 
 /**
@@ -438,3 +440,25 @@ function executeLabelInstructions(label, context) {
     }
   }
 }
+
+/**
+ * @type {HTMLCanvasElement}
+ * @private
+ */
+let createTransformStringCanvas = null;
+
+/**
+ * @param {import("../transform.js").Transform} transform Transform.
+ * @return {string} CSS transform.
+ */
+export function createTransformString(transform) {
+  if (WINDOW) {
+    if (!createTransformStringCanvas) {
+      createTransformStringCanvas = createCanvasContext2D(1, 1).canvas;
+    }
+    createTransformStringCanvas.style.transform = toString(transform);
+    return createTransformStringCanvas.style.transform;
+  } else {
+    return toString(transform);
+  }
+}

src/ol/renderer/canvas/ImageLayer.js

@@ -8,6 +8,7 @@ import {fromUserExtent} from '../../proj.js';
 import {getIntersection, isEmpty} from '../../extent.js';
 import CanvasLayerRenderer from './Layer.js';
 import {compose as composeTransform, makeInverse} from '../../transform.js';
+import {createTransformString} from '../../render/canvas.js';
 
 /**
  * @classdesc
@@ -109,7 +110,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     );
     makeInverse(this.inversePixelTransform, this.pixelTransform);
 
-    const canvasTransform = this.createTransformString(this.pixelTransform);
+    const canvasTransform = createTransformString(this.pixelTransform);
 
     this.useContainer(target, canvasTransform, layerState.opacity);
 

src/ol/renderer/canvas/Layer.js

@@ -7,7 +7,7 @@ import RenderEvent from '../../render/Event.js';
 import RenderEventType from '../../render/EventType.js';
 import {rotateAtOffset} from '../../render/canvas.js';
 import LayerRenderer from '../Layer.js';
-import {create as createTransform, apply as applyTransform, compose as composeTransform, toString} from '../../transform.js';
+import {create as createTransform, apply as applyTransform, compose as composeTransform} from '../../transform.js';
 
 /**
  * @abstract
@@ -69,12 +69,6 @@ class CanvasLayerRenderer extends LayerRenderer {
      */
     this.containerReused = false;
 
-    /**
-     * @type {HTMLCanvasElement}
-     * @private
-     */
-    this.createTransformStringCanvas_ = 'document' in self ? createCanvasContext2D(1, 1).canvas : null;
-
   }
 
   /**
@@ -269,19 +263,7 @@ class CanvasLayerRenderer extends LayerRenderer {
     return data;
   }
 
-  /**
-   * @param {import("../../transform.js").Transform} transform Transform.
-   * @return {string} CSS transform.
-   */
-  createTransformString(transform) {
-    if (this.createTransformStringCanvas_) {
-      this.createTransformStringCanvas_.style.transform = toString(transform);
-      return this.createTransformStringCanvas_.style.transform;
-    } else {
-      return toString(transform);
-    }
-  }
-
 }
 
 export default CanvasLayerRenderer;
+

src/ol/renderer/canvas/TileLayer.js

@@ -9,6 +9,7 @@ import {createEmpty, equals, getIntersection, getTopLeft} from '../../extent.js'
 import CanvasLayerRenderer from './Layer.js';
 import {apply as applyTransform, compose as composeTransform, makeInverse} from '../../transform.js';
 import {numberSafeCompareFunction} from '../../array.js';
+import {createTransformString} from '../../render/canvas.js';
 
 /**
  * @classdesc
@@ -243,7 +244,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       -width / 2, -height / 2
     );
 
-    const canvasTransform = this.createTransformString(this.pixelTransform);
+    const canvasTransform = createTransformString(this.pixelTransform);
 
     this.useContainer(target, canvasTransform, layerState.opacity);
     const context = this.context;