diff --git a/src/ol/renderer/canvas/ImageLayer.js b/src/ol/renderer/canvas/ImageLayer.js
index aec92d876d..13ad732b37 100644
--- a/src/ol/renderer/canvas/ImageLayer.js
+++ b/src/ol/renderer/canvas/ImageLayer.js
@@ -168,18 +168,17 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     const viewState = frameState.viewState;
     const viewCenter = viewState.center;
     const viewResolution = viewState.resolution;
-    const size = frameState.size;
     const scale =
       (pixelRatio * imageResolution) / (viewResolution * imagePixelRatio);
 
-    let width = Math.round(size[0] * pixelRatio);
-    let height = Math.round(size[1] * pixelRatio);
+    const extent = frameState.extent;
+    const resolution = viewState.resolution;
     const rotation = viewState.rotation;
-    if (rotation) {
-      const size = Math.round(Math.sqrt(width * width + height * height));
-      width = size;
-      height = size;
-    }
+    // desired dimensions of the canvas in pixels
+    const width = Math.round((getWidth(extent) / resolution) * imagePixelRatio);
+    const height = Math.round(
+      (getHeight(extent) / resolution) * imagePixelRatio
+    );
 
     // set forward and inverse pixel transforms
     composeTransform(
diff --git a/src/ol/renderer/canvas/TileLayer.js b/src/ol/renderer/canvas/TileLayer.js
index eb8c65896b..409d8b71b4 100644
--- a/src/ol/renderer/canvas/TileLayer.js
+++ b/src/ol/renderer/canvas/TileLayer.js
@@ -18,8 +18,10 @@ import {
   containsCoordinate,
   createEmpty,
   equals,
+  getHeight,
   getIntersection,
   getTopLeft,
+  getWidth,
   intersects,
 } from '../../extent.js';
 import {cssOpacity} from '../../css.js';
@@ -263,6 +265,14 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     const tileResolution = tileGrid.getResolution(z);
 
     let extent = frameState.extent;
+    const resolution = frameState.viewState.resolution;
+    const tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
+    // desired dimensions of the canvas in pixels
+    const width = Math.round((getWidth(extent) / resolution) * tilePixelRatio);
+    const height = Math.round(
+      (getHeight(extent) / resolution) * tilePixelRatio
+    );
+
     const layerExtent =
       layerState.extent && fromUserExtent(layerState.extent, projection);
     if (layerExtent) {
@@ -272,18 +282,6 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       );
     }
 
-    const tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
-
-    // desired dimensions of the canvas in pixels
-    let width = Math.round(frameState.size[0] * tilePixelRatio);
-    let height = Math.round(frameState.size[1] * tilePixelRatio);
-
-    if (rotation) {
-      const size = Math.round(Math.sqrt(width * width + height * height));
-      width = size;
-      height = size;
-    }
-
     const dx = (tileResolution * width) / 2 / tilePixelRatio;
     const dy = (tileResolution * height) / 2 / tilePixelRatio;
     const canvasExtent = [