Fix layer canvas reuse

If the scale values have more than 6 decimals they are rounded and can no longer be
compared to the created transform string.

examples/offscreen-canvas.js

@@ -6,8 +6,8 @@ import Worker from 'worker-loader!./offscreen-canvas.worker.js'; //eslint-disabl
 import stringify from 'json-stringify-safe';
 import {FullScreen} from '../src/ol/control.js';
 import {compose, create} from '../src/ol/transform.js';
-import {createTransformString} from '../src/ol/render/canvas.js';
 import {createXYZ} from '../src/ol/tilegrid.js';
+import {toString as toTransformString} from '../src/ol/transform.js';
 
 const worker = new Worker();
 
@@ -45,7 +45,7 @@ function updateContainerTransform() {
         0
       );
     }
-    transformContainer.style.transform = createTransformString(transform);
+    transformContainer.style.transform = toTransformString(transform);
   }
 }
 

src/ol/render/canvas.js

@@ -7,7 +7,6 @@ import {WORKER_OFFSCREEN_CANVAS} from '../has.js';
 import {clear} from '../obj.js';
 import {createCanvasContext2D} from '../dom.js';
 import {getFontParameters} from '../css.js';
-import {toString} from '../transform.js';
 
 /**
  * @typedef {Object} FillState
@@ -489,25 +488,3 @@ 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 (WORKER_OFFSCREEN_CANVAS) {
-    return toString(transform);
-  } else {
-    if (!createTransformStringCanvas) {
-      createTransformStringCanvas = createCanvasContext2D(1, 1).canvas;
-    }
-    createTransformStringCanvas.style.transform = toString(transform);
-    return createTransformStringCanvas.style.transform;
-  }
-}

src/ol/renderer/canvas/ImageLayer.js

@@ -7,9 +7,9 @@ import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
 import {assign} from '../../obj.js';
 import {compose as composeTransform, makeInverse} from '../../transform.js';
 import {containsExtent, intersects} from '../../extent.js';
-import {createTransformString} from '../../render/canvas.js';
 import {fromUserExtent} from '../../proj.js';
 import {getIntersection, isEmpty} from '../../extent.js';
+import {toString as toTransformString} from '../../transform.js';
 
 /**
  * @classdesc
@@ -132,7 +132,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     );
     makeInverse(this.inversePixelTransform, this.pixelTransform);
 
-    const canvasTransform = createTransformString(this.pixelTransform);
+    const canvasTransform = toTransformString(this.pixelTransform);
 
     this.useContainer(target, canvasTransform, layerState.opacity);
 

src/ol/renderer/canvas/TileLayer.js

@@ -16,10 +16,10 @@ import {
   getIntersection,
   getTopLeft,
 } from '../../extent.js';
-import {createTransformString} from '../../render/canvas.js';
 import {fromUserExtent} from '../../proj.js';
 import {getUid} from '../../util.js';
 import {numberSafeCompareFunction} from '../../array.js';
+import {toString as toTransformString} from '../../transform.js';
 
 /**
  * @classdesc
@@ -280,7 +280,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       -height / 2
     );
 
-    const canvasTransform = createTransformString(this.pixelTransform);
+    const canvasTransform = toTransformString(this.pixelTransform);
 
     this.useContainer(target, canvasTransform, layerState.opacity);
     const context = this.context;

src/ol/transform.js

@@ -1,6 +1,7 @@
 /**
  * @module ol/transform
  */
+import {WORKER_OFFSCREEN_CANVAS} from './has.js';
 import {assert} from './asserts.js';
 
 /**
@@ -265,11 +266,24 @@ export function determinant(mat) {
 }
 
 /**
- * A string version of the transform.  This can be used
+ * @type {HTMLElement}
+ * @private
+ */
+let transformStringDiv;
+
+/**
+ * A rounded string version of the transform.  This can be used
  * for CSS transforms.
  * @param {!Transform} mat Matrix.
  * @return {string} The transform as a string.
  */
 export function toString(mat) {
-  return 'matrix(' + mat.join(', ') + ')';
+  const transformString = 'matrix(' + mat.join(', ') + ')';
+  if (WORKER_OFFSCREEN_CANVAS) {
+    return transformString;
+  }
+  const node =
+    transformStringDiv || (transformStringDiv = document.createElement('div'));
+  node.style.transform = transformString;
+  return node.style.transform;
 }