I am trying to allow a user to use different layer rendering functionalities of OpenLayers 6 into a single map application, e.g. the "layer spy" and "layer swipe" for two TileWMS layers.

Ideally, these functionalities should be toggled in-/active by a button of some description. For this, I created a html checkbox named spy_toggle, with an event listener attached like:

checkbox_spy.addEventListener('change', function() {
   if (this.checked) {
      spy_toggle(true);
      //layer spy is inactive
   } else {
      spy_toggle(false);
      //layer spy is active
   }
});

The spy_toggle function is mostly a wrapper for the OL rendering magic, with a the render parameter to toggle the rendering like so:

function swipe_toggle(render) {
   if (render === true) {      // code from the example starts here
      layer1.on('prerender', function (event) {
         const ctx = event.context;
         ctx.save();
         ctx.beginPath();
         if (mousePosition) {
            // only show a circle around the mouse
            const pixel = getRenderPixel(event, mousePosition);
            const offset = getRenderPixel(event, [
            mousePosition[0] + radius,
            mousePosition[1],
         ]);
  
         const canvasRadius = Math.sqrt(
            Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
         );
         ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);
         ctx.lineWidth = (5 * canvasRadius) / radius;
         ctx.strokeStyle = 'rgba(0,0,0,0.7)';
         ctx.stroke();
      }
      ctx.clip();
    });             // code from the example ends here

   } else {         // inversing the rendering?
      layer1.on('prerender', function (event) {
         const ctx = event.context;
         ctx.restore();
      });
   ...

I can stop the actual layer clipping by calling restoring the canvas context via ctx.restore();.

However, I struggle to remove the black circle stroke around the mouse. I assume via obtaining the circle's current radius and calling ctx.clearRect(coords);, which appears impractical.

At this point, I am wondering if this approach to toggle the functionality is at all sensible, possible or overcomplicated.