Rendering images using JS Canvas with partially transparent pixels after applying an opacity filter slows down my program significantly

I am making a small game using JavaScript, and to draw stuff I am using Canvas2D. The performance of the game is great, and it runs 60fps consistently. Or at least it did until I added a specific texture that contains pixels with partial opacity. I need to make those textures fade away, so I use ctx.filter = "opacity(n%)" where n controls the opacity. When I do this on a fully solid texture (a zombie in my case) no issues occur. But when I attempt to use the same filter on a texture with some translucent pixels, the game drops FPS. Here is the code I use:

ctx.save();
//deathAnim is a variable used for animating the fade out.
if(this.deathAnim) {
    ctx.filter = "brightness(0) opacity(" + (1 - this.deathAnim) + ")"
}
this.drawShadow(); //this draws the "problematic" translucent texture. When I remove this the game runs fine.
this.drawBody(); //this draws the zombie texture, and no issues here regarding lag.
ctx.restore();

I haven’t tried much yet, but If I remove that filter entirely, the game runs fine. Anyone know a workaround I can use, or something to fix the lag?

EDIT: After some further testing, I found out that this filter also affects the zombie texture. Whenever I apply it, the game lags out.