Почему закадровый холст не соответствует свойству стиля фона-фильтра ⇐ CSS

[Anonymous]

У меня есть проект, в котором я рисую холст с помощью веб-воркера. Рисунок выходит нормально. Что касается дизайна остальной части раздела, у меня есть 4 карточки, к которым я хочу применить фоновый фильтр на холсте. По какой-то причине фильтр частично влияет на холст, но не дает желаемого эффекта.
[img]https://i. sstatic.net/iVKyiEHj.png[/img]

Как показано на рисунке выше, эффект размытия применяется, но в то же время холст отображается сзади, как будто фильтр вообще не применялся.
Для получения дополнительной информации я открыл вкладку «Слои» в DevTools, чтобы проверить, как Google Chrome отображает эти слои, и порядок слоев кажется нормальным, хотя кажется, что этот единственный элемент закадрового холста создает еще два, которых нет в DOM, с небольшим изменением разрешения их рендеринга (исходное - 1320x600, другой 2 — 1323x600 и 1327x604).
Ниже приведен код jsx и css, используемый для этих элементов (написанный в реакции)





Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni possimus labore fugit impedit quaerat reiciendis hic velit laboriosam praesentium ad?




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


Подробнее здесь: https://stackoverflow.com/questions/788 ... g-property