I have a Vue SPA which has an OpenLayers 6 map. Said Map is updated in a for loop which waits for rendercomplete events to fire to export the map canvas using the following function :
getMapCanvas () {
var mapCanvas = document.createElement('canvas');
var divElement = document.querySelector(".map");
mapCanvas.width = divElement.offsetWidth;//size[0];
mapCanvas.height = divElement.offsetHeight;//size[1];
var mapContext = mapCanvas.getContext('2d');
Array.prototype.forEach.call(
document.querySelectorAll('.ol-layer canvas'),
function (canvas) {
if (canvas.width > 0) {
const opacity = canvas.parentNode.style.opacity;
mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
const transform = canvas.style.transform;
const matrix = transform
.match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line
.split(',')
.map(Number);
CanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix);
mapContext.drawImage(canvas, 0, 0);
}
}
);
return mapCanvas;
},
The problem is that after I turn on dark mode using :
this.map.getLayers().getArray()[0].on(['postrender'], (evt) => {
if ( this.darkOSM !== null && this.darkOSM === false ) {
evt.context.globalCompositeOperation = 'color';
evt.context.fillStyle = 'rgba(0,0,0,' + 1.0 + ')';
evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
evt.context.globalCompositeOperation = 'overlay';
evt.context.fillStyle = 'rgb(' + [200,200,200].toString() + ')';
evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
evt.context.globalCompositeOperation = 'source-over';
document.querySelector('canvas').style.filter="invert(99%)";
}
});
Instead of getting the first image below (dark mode I see on the screen) I get the second image below :