Tengo un Vue SPA que tiene un mapa OpenLayers 6. Dicho mapa se actualiza en un bucle for que espera a que se activen los eventos rendercomplete para exportar el lienzo del mapa mediante la siguiente función:

 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; },

El problema es que después de activar el modo oscuro usando:

 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%)"; } });

En lugar de obtener la primera imagen a continuación (modo oscuro que veo en la pantalla), obtengo la segunda imagen a continuación: