I am working on a project using OpenLayers with Vue3, where I have a map containing layers with features. Additionally, I have a canvas that I frequently draw on.

I need the canvas to be positioned between the map and my feature layers, meaning the OpenLayers features should be drawn above the canvas image.

To have a better control of the layers, I attempted to add the canvas to OpenLayers using an ImageLayer and then adjusted the zIndex of the layers. However, even with a zIndex of 0 for the canvas and a zIndex of 5 or even 1000 for the features, the canvas always remains on top.

Here is my trial code:

 const layer = createCanvasLayer(site)
 mapStore.canvasLayer.push(layer)
 mapStore.map?.addLayer(layer)
 layer.set('name', 'canvas-layers')

// Function to create layer of canvas
const createCanvasLayer = (site: ISite) => {
  return new ImageLayer({
    source: new ImageCanvasSource({
      canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
        const canvas = document.createElement('canvas')
        canvas.width = site.image.size
        canvas.height = site.image.size

        // Handing over the canvas to a Web Worker for drawing
        workersStore.initWorker(site, canvas)

        return canvas
      },
      projection: 'EPSG:3857',
      ratio: 1,
    }),
    zIndex: 0
  })
}

Before using ImageLayer I also tried to use the simple z-index css value, but that didn't change anything as well.

Additional Information:

1. I create the OpenLayers canvas only when the user clicks on a button, whereas features layer is created automatically. This means that the canvas layer is added after the feature layer. However I tried to compensate this by adding the zIndex which wasn't fruitful
2. After the canvas is created, I hand over control to a Web Worker to handle the drawing. However, I don't think this affects the zIndex, as my feature layers still remain at 0 or 1000, but I mention this in case it might have an impact.
3. To position my canvas in spatial coordinates, I added it inside an ol.Overlay like this:

const overlay = new Overlay({
 element: element, //my HTMLCanvasElement
 position: fromLonLat(position),
 positioning: 'center-center',
    })

And I also tried to change its z-index, but it still doesn't change anything overlayElement.style.zIndex = "0"

How can I ensure that my OpenLayers features are rendered above the canvas while keeping the canvas below them? Why is my canvas on top of my layers even though it has a zIndex inferior to my layer ? I am open to try any other solutions (other than ImageLayer) that might exist

Thanks in advance for any help!