Transform origin top left

src/ol/renderer/Composite.js

@@ -31,9 +31,6 @@ class CompositeMapRenderer extends MapRenderer {
      */
     this.element_ = document.createElement('div');
     const style = this.element_.style;
-    style.display = 'flex';
-    style.alignItems = 'center';
-    style.justifyContent = 'center';
     style.width = '100%';
     style.height = '100%';
 

src/ol/renderer/canvas/ImageLayer.js

@@ -6,7 +6,7 @@ import ViewHint from '../../ViewHint.js';
 import {containsExtent, intersects} from '../../extent.js';
 import {getIntersection, isEmpty} from '../../extent.js';
 import CanvasLayerRenderer from './Layer.js';
-import {create as createTransform, compose as composeTransform} from '../../transform.js';
+import {create as createTransform, compose as composeTransform, toString as transformToString} from '../../transform.js';
 
 /**
  * @classdesc
@@ -99,31 +99,20 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
       width = height = size;
     }
 
-    const transform = composeTransform(this.transform_,
-      width / 2, height / 2,
-      scale, scale,
-      0,
-      imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution,
-      imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution);
-
-    composeTransform(this.coordinateToCanvasPixelTransform,
-      pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
-      pixelRatio / viewResolution, -pixelRatio / viewResolution,
-      0,
-      -viewCenter[0], -viewCenter[1]);
-
-    this.renderedResolution = imageResolution * pixelRatio / imagePixelRatio;
-
-
     const context = this.context;
     const canvas = context.canvas;
 
+    const pixelTransform = composeTransform(this.transform_,
+      frameState.size[0] / 2, frameState.size[1] / 2,
+      1 / pixelRatio, 1 / pixelRatio,
+      rotation,
+      -width / 2, -height / 2
+    ).slice();
+    const canvasTransform = transformToString(pixelTransform);
 
     if (canvas.width != width || canvas.height != height) {
       canvas.width = width;
       canvas.height = height;
-      canvas.style.width = (width / pixelRatio) + 'px';
-      canvas.style.height = (height / pixelRatio) + 'px';
     } else {
       context.clearRect(0, 0, width, height);
     }
@@ -139,6 +128,15 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     const img = image.getImage();
 
+    const transform = composeTransform(this.transform_,
+      width / 2, height / 2,
+      scale, scale,
+      0,
+      imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution,
+      imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution);
+
+    this.renderedResolution = imageResolution * pixelRatio / imagePixelRatio;
+
     const dx = transform[4];
     const dy = transform[5];
     const dw = img.width * transform[0];
@@ -153,7 +151,11 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
       context.restore();
     }
 
-    const canvasTransform = 'rotate(' + rotation + 'rad)';
+    const opacity = layerState.opacity;
+    if (opacity !== canvas.style.opacity) {
+      canvas.style.opacity = opacity;
+    }
+
     if (canvasTransform !== canvas.style.transform) {
       canvas.style.transform = canvasTransform;
     }

src/ol/renderer/canvas/Layer.js

@@ -42,6 +42,7 @@ class CanvasLayerRenderer extends LayerRenderer {
 
     const canvas = this.context.canvas;
     canvas.style.position = 'absolute';
+    canvas.style.transformOrigin = 'top left';
     canvas.className = this.getLayer().getClassName();
 
   }

src/ol/renderer/canvas/TileLayer.js

@@ -222,10 +222,10 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     const canvas = context.canvas;
     const canvasScale = tileResolution / frameState.viewState.resolution / tilePixelRatio;
     const pixelTransform = composeTransform(this.transform_,
-      0, 0,
+      frameState.size[0] / 2, frameState.size[1] / 2,
       canvasScale, canvasScale,
       rotation,
-      0, 0
+      -width / 2, -height / 2
     );
     const canvasTransform = transformToString(pixelTransform);
 

src/ol/renderer/canvas/VectorTileLayer.js

@@ -5,7 +5,7 @@ import {getUid} from '../../util.js';
 import {createCanvasContext2D} from '../../dom.js';
 import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
-import {listen, unlisten, unlistenByKey} from '../../events.js';
+import {listen, unlisten} from '../../events.js';
 import EventType from '../../events/EventType.js';
 import rbush from 'rbush';
 import {buffer, containsCoordinate, equals, getIntersection, getTopLeft, intersects} from '../../extent.js';
@@ -75,9 +75,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const container = document.createElement('div');
     const style = container.style;
     style.position = 'absolute';
-    style.display = 'flex';
-    style.alignItems = 'center';
-    style.justifyContent = 'center';
     style.width = '100%';
     style.height = '100%';