title: OpenLayers 3 postcompose to OpenLayers 6 event in Vue SPA
body: <p>I have made this <a href="https://codepen.io/StuckDuckF/pen/oNEYPQg" rel="nofollow noreferrer">codepen</a> where I manipulate the context of the basemap of a OpenLayers map on <code>postcompose</code>. The problem I have is translating this working demo to a Vue SPA which uses OpenLayers 6 where I would like to link the dark mode map effect to a toggle. The <code>postcompose</code> event is not fired the same way for OL6 as it did for OL3 so I tried hooking onto <code>prerender</code>.</p>
  <pre class="lang-js prettyprint-override"><code>import TileLayer from 'ol/layer/Tile';
  ...
  osm: new TileLayer({source: new OSM()})
  </code></pre>
  <p>In OpenLayers 3 the following code gets me a permanently dark mode map :</p>
  <pre class="lang-js prettyprint-override"><code>OSM_LAYER.on('postcompose', function (evt) {
      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=&quot;invert(99%)&quot;;
  });
  </code></pre>
  <p>Currently I am trying to use <code>getVectorContext</code> as per <a href="https://stackoverflow.com/a/59020697/13224380">this answer</a> but I am not understanding something since my code does not give me the correct dark mode :</p>
  <pre class="lang-js prettyprint-override"><code>OSM_LAYER.on('prerender', function (evt) {
      var ctx = getVectorContext(evt).context_
      ctx.globalCompositeOperation = ‘color’;
      ctx.fillStyle = ‘rgba(0,0,0,’ + 1.0 + ‘)’;
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.globalCompositeOperation = ‘overlay’;
      ctx.fillStyle = ‘rgb(‘ + [200,200,200].toString() + ‘)’;
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.globalCompositeOperation = ‘source-over’;
      document.querySelector('canvas').style.filter=&quot;invert(99%)&quot;;
  });
  </code></pre>
  <h3>EDIT : Thanks to Mr. Mike's answer I am able to replicate the look of the OL3 dark mode. The problem now is that I actually use this basemap to create an animation where I update the time parameters of all layers in a for loop and then extract the map canvas using :</h3>
  <pre class="lang-js prettyprint-override"><code>getMapCanvas () {
      var mapCanvas = document.createElement('canvas');
      var divElement = document.querySelector(&quot;.map&quot;);
      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 &gt; 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;
  },
  </code></pre>
  <p>which is called only after a <code>rendercomplete</code> promise is resolved. Using Mr. Mike's method I get a weird white hue instead of the dark mode OSM and I think it is because of how I am exporting the canvas in the <code>getMapCanvas</code> function. Can someone help me out debug this?</p>