feat(*): add support for blur filter in canvas renderer

player/js/elements/canvasElements/CVEffects.js

@@ -19,13 +19,25 @@ function CVEffects(elem) {
   if (this.filters.length) {
     elem.addRenderableComponent(this);
   }
+  this.globalData = elem.globalData;
 }
 
 CVEffects.prototype.renderFrame = function (_isFirstFrame) {
   var i;
   var len = this.filters.length;
+  var filterStrings = [];
+
   for (i = 0; i < len; i += 1) {
     this.filters[i].renderFrame(_isFirstFrame);
+    if (this.filters[i].filterString) {
+      filterStrings.push(this.filters[i].filterString);
+    }
+  }
+
+  var canvasContext = this.globalData.canvasContext;
+
+  if (canvasContext && filterStrings.length > 0) {
+    canvasContext.filter = filterStrings.join(' ');
   }
 };
 

player/js/elements/canvasElements/effects/CVGaussianBlurEffect.js

@@ -0,0 +1,33 @@
+function CVGaussianBlurEffect(effectsManager, elem) {
+  this.filterManager = effectsManager;
+  this.elem = elem;
+  this.globalData = elem.globalData;
+}
+
+CVGaussianBlurEffect.prototype.renderFrame = function () {
+  var scale = this.globalData.transformCanvas.sx;
+  // Empirical value, matching AE's blur appearance.
+  var kBlurrinessToSigma = 0.3;
+  var sigma = this.filterManager.effectElements[0].p.v * kBlurrinessToSigma * scale;
+
+  // Dimensions mapping:
+  //
+  //   1 -> horizontal & vertical
+  //   2 -> horizontal only
+  //   3 -> vertical only
+  //
+  var dimensions = this.filterManager.effectElements[1].p.v;
+  var sigmaX = (dimensions == 3) ? 0 : sigma; // eslint-disable-line eqeqeq
+  var sigmaY = (dimensions == 2) ? 0 : sigma; // eslint-disable-line eqeqeq
+
+  // Store filter string for combination with other effects
+  if (sigmaX > 0 || sigmaY > 0) {
+    // Canvas filter doesn't support separate X/Y blur like SVG, use maximum sigma
+    var blurRadius = Math.max(sigmaX, sigmaY);
+    this.filterString = 'blur(' + blurRadius + 'px)';
+  } else {
+    this.filterString = '';
+  }
+};
+
+export default CVGaussianBlurEffect;

player/js/modules/canvas.js

@@ -8,13 +8,15 @@ import interfacesProvider from '../utils/expressions/InterfacesProvider';
 import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
 import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
 import CVTransformEffect from '../elements/canvasElements/effects/CVTransformEffect';
+import CVGaussianBlurEffect from '../elements/canvasElements/effects/CVGaussianBlurEffect';
 import { registerEffect } from '../elements/canvasElements/CVEffects';
 
 // Registering expression plugin
 setExpressionsPlugin(Expressions);
 setExpressionInterfaces(interfacesProvider);
 expressionPropertyDecorator();
 expressionTextPropertyDecorator();
+registerEffect(29, CVGaussianBlurEffect);
 registerEffect(35, CVTransformEffect);
 
 export default lottie;

player/js/modules/full.js

@@ -32,6 +32,7 @@ import SVGMatte3Effect from '../elements/svgElements/effects/SVGMatte3Effect';
 import SVGGaussianBlurEffect from '../elements/svgElements/effects/SVGGaussianBlurEffect';
 import SVGTransformEffect from '../elements/svgElements/effects/SVGTransformEffect';
 import CVTransformEffect from '../elements/canvasElements/effects/CVTransformEffect';
+import CVGaussianBlurEffect from '../elements/canvasElements/effects/CVGaussianBlurEffect';
 import { registerEffect as canvasRegisterEffect } from '../elements/canvasElements/CVEffects';
 
 // Registering renderers
@@ -63,6 +64,7 @@ registerEffect(25, SVGDropShadowEffect, true);
 registerEffect(28, SVGMatte3Effect, false);
 registerEffect(29, SVGGaussianBlurEffect, true);
 registerEffect(35, SVGTransformEffect, false);
+canvasRegisterEffect(29, CVGaussianBlurEffect);
 canvasRegisterEffect(35, CVTransformEffect);
 
 export default lottie;