From f90efac131db3bf297f57a89a6cbd136a7b05020 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Thu, 15 Nov 2018 11:37:45 +0100
Subject: [PATCH] Smaller canvas when rotating vector layers

---
 src/ol/render/canvas/Executor.js          |  4 ++--
 src/ol/renderer/canvas/Layer.js           |  2 +-
 src/ol/renderer/canvas/VectorLayer.js     | 14 ++------------
 src/ol/renderer/canvas/VectorTileLayer.js | 13 ++-----------
 4 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/src/ol/render/canvas/Executor.js b/src/ol/render/canvas/Executor.js
index aa992258f1..cb018d1e42 100644
--- a/src/ol/render/canvas/Executor.js
+++ b/src/ol/render/canvas/Executor.js
@@ -700,8 +700,8 @@ class CanvasExecutor {
             backgroundFill = backgroundStroke = false;
           }
 
-          if (!rotateWithView) {
-            rotation -= viewRotation;
+          if (rotateWithView) {
+            rotation += viewRotation;
           }
           let widthIndex = 0;
           for (; d < dd; d += 2) {
diff --git a/src/ol/renderer/canvas/Layer.js b/src/ol/renderer/canvas/Layer.js
index 3dbb80ade1..6475a8366e 100644
--- a/src/ol/renderer/canvas/Layer.js
+++ b/src/ol/renderer/canvas/Layer.js
@@ -192,7 +192,7 @@ class CanvasLayerRenderer extends LayerRenderer {
     const sy = -sx;
     const dx2 = -viewState.center[0] + offsetX;
     const dy2 = -viewState.center[1];
-    return composeTransform(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2);
+    return composeTransform(this.transform_, dx1, dy1, sx, sy, -viewState.rotation, dx2, dy2);
   }
 
 }
diff --git a/src/ol/renderer/canvas/VectorLayer.js b/src/ol/renderer/canvas/VectorLayer.js
index d611d07aa6..4fd36b7455 100644
--- a/src/ol/renderer/canvas/VectorLayer.js
+++ b/src/ol/renderer/canvas/VectorLayer.js
@@ -123,12 +123,8 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     }
 
     // resize and clear
-    let width = Math.round(frameState.size[0] * pixelRatio);
-    let height = Math.round(frameState.size[1] * pixelRatio);
-    if (rotation) {
-      const size = Math.round(Math.sqrt(width * width + height * height));
-      width = height = size;
-    }
+    const width = Math.round(frameState.size[0] * pixelRatio);
+    const height = Math.round(frameState.size[1] * pixelRatio);
     if (canvas.width != width || canvas.height != height) {
       canvas.width = width;
       canvas.height = height;
@@ -193,12 +189,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       canvas.style.opacity = opacity;
     }
 
-    const rotation = frameState.viewState.rotation;
-    const transform = 'rotate(' + rotation + 'rad)';
-    if (transform !== canvas.style.transform) {
-      canvas.style.transform = transform;
-    }
-
     return canvas;
   }
 
diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js
index c1447a7ab6..f1bb8c7dd5 100644
--- a/src/ol/renderer/canvas/VectorTileLayer.js
+++ b/src/ol/renderer/canvas/VectorTileLayer.js
@@ -378,12 +378,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
 
     // resize and clear
     const canvas = context.canvas;
-    let width = Math.round(size[0] * pixelRatio);
-    let height = Math.round(size[1] * pixelRatio);
-    if (rotation) {
-      const size = Math.round(Math.sqrt(width * width + height * height));
-      width = height = size;
-    }
+    const width = Math.round(size[0] * pixelRatio);
+    const height = Math.round(size[1] * pixelRatio);
     if (canvas.width != width || canvas.height != height) {
       canvas.width = width;
       canvas.height = height;
@@ -462,11 +458,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       canvas.style.opacity = opacity;
     }
 
-    const canvasTransform = 'rotate(' + rotation + 'rad)';
-    if (canvasTransform !== canvas.style.transform) {
-      canvas.style.transform = canvasTransform;
-    }
-
     return this.container_;
   }