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

player/js/elements/canvasElements/CVEffects.js

@@ -4,6 +4,7 @@ function CVEffects(elem) {
   var i;
   var len = elem.data.ef ? elem.data.ef.length : 0;
   this.filters = [];
+  this.globalData = elem.globalData;
   var filterManager;
   for (i = 0; i < len; i += 1) {
     filterManager = null;
@@ -24,9 +25,15 @@ function CVEffects(elem) {
 CVEffects.prototype.renderFrame = function (_isFirstFrame) {
   var i;
   var len = this.filters.length;
+  var canvasContext = this.globalData.canvasContext;
+  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);
+    }
   }
+  canvasContext.filter = filterStrings.length ? filterStrings.join(' ') : 'none';
 };
 
 CVEffects.prototype.getEffects = function (type) {

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

@@ -0,0 +1,29 @@
+function CVGaussianBlurEffect(effectElements, elem) {
+  this.filterManager = effectElements;
+  this.globalData = elem.globalData;
+  this.filterString = '';
+}
+
+CVGaussianBlurEffect.prototype.renderFrame = function () {
+  // Empirical value, matching AE's blur appearance.
+  var kBlurrinessToSigma = 0.3;
+  var canvasScale = this.globalData.transformCanvas.sx;
+  var sigma = this.filterManager.effectElements[0].p.v * kBlurrinessToSigma * canvasScale;
+
+  // Dimensions mapping:
+  //
+  //   1 -> horizontal & vertical
+  //   2 -> horizontal only
+  //   3 -> vertical only
+  //
+  // The Canvas API doesn't support separate X/Y blur like SVG,
+  // so we use the maximum sigma.
+  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
+  var maxSigma = Math.max(sigmaX, sigmaY);
+
+  this.filterString = maxSigma > 0 ? 'blur(' + maxSigma + 'px)' : '';
+};
+
+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;