I have a project, in which I draw a canvas using a webworker. The drawing comes out fine. For the rest of the section’s design, I have 4 cards, which I want them to apply a backdrop filter on the canvas. For some reason, the filter is partly affecting the canvas, but not giving me the desired effect.

As the picture above shows, the blur effect is being applied, but at the same time the canvas is shown as if the filter wasn’t applied at all.

For additional information, I have opened the “Layers” tab in DevTools to check out how google chrome renders those layers, and the layers’ order seems fine, althought, it seems like this singular offscreen canvas element creates 2 more that are not present in the DOM, with a slight change in their rendering resolution (original is 1320×600, the other 2 are 1323×600 and 1327×604).

Below is the jsx and css code used for those elements (written in react)

<div className="container">
   <div className="canvas-wrapper">
      <canvas ref={canvasRef}></canvas>
   </div>
   <div className="cards-wrapper">
      <AnimatedCard header='header1'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
      <AnimatedCard header='header2'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
      <AnimatedCard header='header3'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
      <AnimatedCard header='header4'>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?
      </AnimatedCard>
   </div>
</div>

.canvas-wrapper {
    position: absolute;
    width: calc(100% - 8px);
    height: 100%;
    left: 5px;
    z-index: -100;
}

canvas {
    width: 100%;
    height: 100%;
    position: relative;
    mask-image: linear-gradient(rgba(0, 6, 10, 1) 85%, transparent 95%);
    border-left: 1px solid var(--gray-border-color);
    border-right: 1px solid var(--gray-border-color;
    z-index: -10;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    position: relative;
    z-index: 10;
}

// this is the background of the cards above
.card-wrapper {
    display: flex;
    background-color: rgba(var(--black-tint-3), 0.1);
    flex-direction: column;
    border-radius: 10px;
    height: 100%;
    width: 100%;
    padding: 32px 16px;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 10;
}