Canvas opacity instead of css

src/ol/render/canvas.js

@@ -403,7 +403,7 @@ export function drawImage(context,
 
   context.drawImage(image, originX, originY, w, h, x, y, w * scale, h * scale);
 
-  if (alpha) {
+  if (opacity != 1) {
     context.globalAlpha = alpha;
   }
   if (transform) {

src/ol/renderer/canvas/ImageLayer.js

@@ -140,8 +140,17 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     this.preRender(context, frameState);
     if (dw >= 0.5 && dh >= 0.5) {
+      const opacity = this.getLayer().getOpacity();
+      let previousAlpha;
+      if (opacity !== 1) {
+        previousAlpha = this.context.globalAlpha;
+        this.context.globalAlpha = opacity;
+      }
       this.context.drawImage(img, 0, 0, +img.width, +img.height,
         Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh));
+      if (opacity !== 1) {
+        this.context.globalAlpha = previousAlpha;
+      }
     }
     this.postRender(context, frameState);
 
@@ -149,11 +158,6 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
       context.restore();
     }
 
-    const opacity = layerState.opacity;
-    if (opacity !== parseFloat(canvas.style.opacity)) {
-      canvas.style.opacity = opacity;
-    }
-
     const canvasTransform = transformToString(this.pixelTransform_);
     if (canvasTransform !== canvas.style.transform) {
       canvas.style.transform = canvasTransform;

src/ol/renderer/canvas/TileLayer.js

@@ -274,7 +274,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     });
 
     let clips, clipZs, currentClip;
-    if (tileSource.getOpaque(frameState.viewState.projection)) {
+    if (!this.containerReused || tileSource.getOpaque(frameState.viewState.projection)) {
       zs = zs.reverse();
     } else {
       clips = [];
@@ -360,11 +360,6 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       context.restore();
     }
 
-    const opacity = layerState.opacity;
-    if (opacity !== parseFloat(canvas.style.opacity)) {
-      canvas.style.opacity = opacity;
-    }
-
     const canvasTransform = transformToString(this.pixelTransform_);
     if (canvasTransform !== canvas.style.transform) {
       canvas.style.transform = canvasTransform;
@@ -389,7 +384,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       return;
     }
     const uid = getUid(this);
-    const alpha = transition ? tile.getAlpha(uid, frameState.time) : 1;
+    const alpha = this.getLayer().getOpacity() * (transition ? tile.getAlpha(uid, frameState.time) : 1);
     const alphaChanged = alpha !== this.context.globalAlpha;
     if (alphaChanged) {
       this.context.save();

src/ol/renderer/canvas/VectorLayer.js

@@ -67,6 +67,16 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     this.replayGroupChanged = true;
   }
 
+  /**
+   * @inheritDoc
+   */
+  useContainer(target, transform) {
+    if (this.getLayer().getOpacity() < 1) {
+      target = null;
+    }
+    super.useContainer(target, transform);
+  }
+
   /**
    * @inheritDoc
    */

src/ol/renderer/canvas/VectorTileLayer.js

@@ -481,11 +481,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       replayDeclutter(declutterReplays, context, rotation, hifi, frameState.declutterItems);
     }
 
-    const opacity = layerState.opacity;
-    if (opacity !== parseFloat(canvas.style.opacity)) {
-      canvas.style.opacity = opacity;
-    }
-
     return this.container;
   }