CSS Blur Filter Performance

Question

I\'m creating a website that has an ::after element with a backgound and a CSS3 blur applied. I\'ve noticed that applying the CSS3 blur has a huge detrimental effect on perf

Answer 1

@ericjbasti's comment was useful:

I added

then in scss,

.canvaswrapper{position: relative;}

#myFogCanvas{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

then in js

var canvas = document.getElementById("myFogCanvas");
var ctx = canvas.getContext('2d');
//all the drawing stuff for canvas ... moveTo, lineTo, etc.
ctx.filter = 'blur(15px)';
ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
ctx.lineWidth = 5;
ctx.stroke();

then I was able to animate the .canvaswrapper div in css with animation @keyframes. You might use var image = new Image(); on canvas and then blur it.

The performance was WAAAYYYY better than using blur in CSS, especially with animations.