@lumen5/lottie-web 5.14.0

package/player/js/elements/canvasElements/CVBaseElement.js

@@ -0,0 +1,167 @@
+import assetManager from '../../utils/helpers/assetManager';
+import getBlendMode from '../../utils/helpers/blendModes';
+import Matrix from '../../3rd_party/transformation-matrix';
+import CVEffects from './CVEffects';
+import CVMaskElement from './CVMaskElement';
+import effectTypes from '../../utils/helpers/effectTypes';
+
+function CVBaseElement() {
+}
+
+var operationsMap = {
+  1: 'source-in',
+  2: 'source-out',
+  3: 'source-in',
+  4: 'source-out',
+};
+
+CVBaseElement.prototype = {
+  createElements: function () {},
+  initRendererElement: function () {},
+  createContainerElements: function () {
+    // If the layer is masked we will use two buffers to store each different states of the drawing
+    // This solution is not ideal for several reason. But unfortunately, because of the recursive
+    // nature of the render tree, it's the only simple way to make sure one inner mask doesn't override an outer mask.
+    // TODO: try to reduce the size of these buffers to the size of the composition contaning the layer
+    // It might be challenging because the layer most likely is transformed in some way
+    if (this.data.tt >= 1) {
+      if (this.data.tt >= 3 && !document._isProxy) {
+        assetManager.loadLumaCanvas();
+      }
+    }
+    this.canvasContext = this.globalData.canvasContext;
+    this.transformCanvas = this.globalData.transformCanvas;
+    this.renderableEffectsManager = new CVEffects(this);
+    this.searchEffectTransforms();
+  },
+  createContent: function () {},
+  setBlendMode: function () {
+    var globalData = this.globalData;
+    if (globalData.blendMode !== this.data.bm) {
+      globalData.blendMode = this.data.bm;
+      var blendModeValue = getBlendMode(this.data.bm);
+      globalData.canvasContext.globalCompositeOperation = blendModeValue;
+    }
+  },
+  createRenderableComponents: function () {
+    this.maskManager = new CVMaskElement(this.data, this);
+    this.transformEffects = this.renderableEffectsManager.getEffects(effectTypes.TRANSFORM_EFFECT);
+  },
+  hideElement: function () {
+    if (!this.hidden && (!this.isInRange || this.isTransparent)) {
+      this.hidden = true;
+    }
+  },
+  showElement: function () {
+    if (this.isInRange && !this.isTransparent) {
+      this.hidden = false;
+      this._isFirstFrame = true;
+      this.maskManager._isFirstFrame = true;
+    }
+  },
+  clearCanvas: function (canvasContext) {
+    canvasContext.clearRect(
+      this.transformCanvas.tx,
+      this.transformCanvas.ty,
+      this.transformCanvas.w * this.transformCanvas.sx,
+      this.transformCanvas.h * this.transformCanvas.sy
+    );
+  },
+  prepareLayer: function () {
+    if (this.data.tt >= 1) {
+      this.globalDrawingBufferCanvas = this.globalData.renderConfig.bufferManager.allocate(this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+      var globalDrawingBufferCanvasCtx = this.globalDrawingBufferCanvas.getContext('2d');
+      this.clearCanvas(globalDrawingBufferCanvasCtx);
+      // on the first buffer we store the current state of the global drawing
+      globalDrawingBufferCanvasCtx.drawImage(this.canvasContext.canvas, 0, 0);
+      // The next four lines are to clear the canvas
+      // TODO: Check if there is a way to clear the canvas without resetting the transform
+      this.currentTransform = this.canvasContext.getTransform();
+      this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+      this.clearCanvas(this.canvasContext);
+      this.canvasContext.setTransform(this.currentTransform);
+    }
+  },
+  exitLayer: function () {
+    if (this.data.tt >= 1) {
+      var contentOfCurrentLayerCanvas = this.globalData.renderConfig.bufferManager.allocate(this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+      // On the second buffer we store the current state of the global drawing
+      // that only contains the content of this layer
+      // (if it is a composition, it also includes the nested layers)
+      var contentOfCurrentLayerCanvasCtx = contentOfCurrentLayerCanvas.getContext('2d');
+      this.clearCanvas(contentOfCurrentLayerCanvasCtx);
+      contentOfCurrentLayerCanvasCtx.drawImage(this.canvasContext.canvas, 0, 0);
+      // We clear the canvas again
+      this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+      this.clearCanvas(this.canvasContext);
+      this.canvasContext.setTransform(this.currentTransform);
+      // We draw the mask
+      const mask = this.comp.getElementById('tp' in this.data ? this.data.tp : this.data.ind - 1);
+      mask.renderFrame(true);
+      // We draw the second buffer (that contains the content of this layer)
+      this.canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+
+      // If the mask is a Luma matte, we need to do two extra painting operations
+      // the _isProxy check is to avoid drawing a fake canvas in workers that will throw an error
+      if (this.data.tt >= 3 && !document._isProxy) {
+        // We copy the painted mask to a buffer that has a color matrix filter applied to it
+        // that applies the rgb values to the alpha channel
+        var lumaBuffer = assetManager.getLumaCanvas(this.canvasContext.canvas);
+        var lumaBufferCtx = lumaBuffer.getContext('2d');
+        lumaBufferCtx.drawImage(this.canvasContext.canvas, 0, 0);
+        this.clearCanvas(this.canvasContext);
+        // we repaint the context with the mask applied to it
+        this.canvasContext.drawImage(lumaBuffer, 0, 0);
+      }
+      this.canvasContext.globalCompositeOperation = operationsMap[this.data.tt];
+      this.canvasContext.drawImage(contentOfCurrentLayerCanvas, 0, 0);
+      // We finally draw the first buffer (that contains the content of the global drawing)
+      // We use destination-over to draw the global drawing below the current layer
+      this.canvasContext.globalCompositeOperation = 'destination-over';
+      this.canvasContext.drawImage(this.globalDrawingBufferCanvas, 0, 0);
+      this.canvasContext.setTransform(this.currentTransform);
+      // We reset the globalCompositeOperation to source-over, the standard type of operation
+      this.canvasContext.globalCompositeOperation = 'source-over';
+
+      this.globalData.renderConfig.bufferManager.release(this.globalDrawingBufferCanvas);
+      this.globalData.renderConfig.bufferManager.release(contentOfCurrentLayerCanvas);
+    }
+  },
+  renderFrame: function (forceRender) {
+    if (this.hidden || this.data.hd) {
+      return;
+    }
+    if (this.data.td === 1 && !forceRender) {
+      return;
+    }
+    this.renderTransform();
+    this.renderRenderable();
+    this.renderLocalTransform();
+    this.setBlendMode();
+    var forceRealStack = this.data.ty === 0;
+    this.prepareLayer();
+    this.globalData.renderer.save(forceRealStack);
+    this.globalData.renderer.ctxTransform(this.finalTransform.localMat.props);
+    this.globalData.renderer.ctxOpacity(this.finalTransform.localOpacity);
+    this.renderInnerContent();
+    this.globalData.renderer.restore(forceRealStack);
+    this.exitLayer();
+    if (this.maskManager.hasMasks) {
+      this.globalData.renderer.restore(true);
+    }
+    if (this._isFirstFrame) {
+      this._isFirstFrame = false;
+    }
+  },
+  destroy: function () {
+    this.canvasContext = null;
+    this.data = null;
+    this.globalData = null;
+    this.maskManager.destroy();
+  },
+  mHelper: new Matrix(),
+};
+CVBaseElement.prototype.hide = CVBaseElement.prototype.hideElement;
+CVBaseElement.prototype.show = CVBaseElement.prototype.showElement;
+
+export default CVBaseElement;

package/player/js/elements/canvasElements/CVCompBaseElement.js

@@ -0,0 +1,11 @@
+import BaseRenderer from '../../renderers/BaseRenderer';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+
+function CVCompBaseElement() {
+
+}
+extendPrototype([BaseRenderer], CVCompBaseElement);
+
+export default CVCompBaseElement;

package/player/js/elements/canvasElements/CVCompElement.js

@@ -0,0 +1,57 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import PropertyFactory from '../../utils/PropertyFactory';
+import CanvasRendererBase from '../../renderers/CanvasRendererBase';
+import CVBaseElement from './CVBaseElement';
+import ICompElement from '../CompElement';
+
+function CVCompElement(data, globalData, comp) {
+  this.completeLayers = false;
+  this.layers = data.layers;
+  this.pendingElements = [];
+  this.elements = createSizedArray(this.layers.length);
+  this.initElement(data, globalData, comp);
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+}
+
+extendPrototype([CanvasRendererBase, ICompElement, CVBaseElement], CVCompElement);
+
+CVCompElement.prototype.renderInnerContent = function () {
+  var ctx = this.canvasContext;
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(this.data.w, 0);
+  ctx.lineTo(this.data.w, this.data.h);
+  ctx.lineTo(0, this.data.h);
+  ctx.lineTo(0, 0);
+  ctx.clip();
+  var i;
+  var len = this.layers.length;
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].renderFrame();
+    }
+  }
+};
+
+CVCompElement.prototype.destroy = function () {
+  var i;
+  var len = this.layers.length;
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.elements[i]) {
+      this.elements[i].destroy();
+    }
+  }
+  this.layers = null;
+  this.elements = null;
+};
+
+CVCompElement.prototype.createComp = function (data) {
+  return new CVCompElement(data, this.globalData, this);
+};
+
+export default CVCompElement;

package/player/js/elements/canvasElements/CVContextData.js

@@ -0,0 +1,239 @@
+import {
+  createTypedArray,
+} from '../../utils/helpers/arrays';
+import Matrix from '../../3rd_party/transformation-matrix';
+
+function CanvasContext() {
+  this.opacity = -1;
+  this.transform = createTypedArray('float32', 16);
+  this.fillStyle = '';
+  this.strokeStyle = '';
+  this.lineWidth = '';
+  this.lineCap = '';
+  this.lineJoin = '';
+  this.miterLimit = '';
+  this.id = Math.random();
+}
+
+function CVContextData() {
+  this.stack = [];
+  this.cArrPos = 0;
+  this.cTr = new Matrix();
+  var i;
+  var len = 15;
+  for (i = 0; i < len; i += 1) {
+    var canvasContext = new CanvasContext();
+    this.stack[i] = canvasContext;
+  }
+  this._length = len;
+  this.nativeContext = null;
+  this.transformMat = new Matrix();
+  this.currentOpacity = 1;
+  //
+  this.currentFillStyle = '';
+  this.appliedFillStyle = '';
+  //
+  this.currentStrokeStyle = '';
+  this.appliedStrokeStyle = '';
+  //
+  this.currentLineWidth = '';
+  this.appliedLineWidth = '';
+  //
+  this.currentLineCap = '';
+  this.appliedLineCap = '';
+  //
+  this.currentLineJoin = '';
+  this.appliedLineJoin = '';
+  //
+  this.appliedMiterLimit = '';
+  this.currentMiterLimit = '';
+}
+
+CVContextData.prototype.duplicate = function () {
+  var newLength = this._length * 2;
+  var i = 0;
+  for (i = this._length; i < newLength; i += 1) {
+    this.stack[i] = new CanvasContext();
+  }
+  this._length = newLength;
+};
+
+CVContextData.prototype.reset = function () {
+  this.cArrPos = 0;
+  this.cTr.reset();
+  this.stack[this.cArrPos].opacity = 1;
+};
+
+CVContextData.prototype.restore = function (forceRestore) {
+  this.cArrPos -= 1;
+  var currentContext = this.stack[this.cArrPos];
+  var transform = currentContext.transform;
+  var i;
+  var arr = this.cTr.props;
+  for (i = 0; i < 16; i += 1) {
+    arr[i] = transform[i];
+  }
+  if (forceRestore) {
+    this.nativeContext.restore();
+    var prevStack = this.stack[this.cArrPos + 1];
+    this.appliedFillStyle = prevStack.fillStyle;
+    this.appliedStrokeStyle = prevStack.strokeStyle;
+    this.appliedLineWidth = prevStack.lineWidth;
+    this.appliedLineCap = prevStack.lineCap;
+    this.appliedLineJoin = prevStack.lineJoin;
+    this.appliedMiterLimit = prevStack.miterLimit;
+  }
+  this.nativeContext.setTransform(transform[0], transform[1], transform[4], transform[5], transform[12], transform[13]);
+  if (forceRestore || (currentContext.opacity !== -1 && this.currentOpacity !== currentContext.opacity)) {
+    this.nativeContext.globalAlpha = currentContext.opacity;
+    this.currentOpacity = currentContext.opacity;
+  }
+  this.currentFillStyle = currentContext.fillStyle;
+  this.currentStrokeStyle = currentContext.strokeStyle;
+  this.currentLineWidth = currentContext.lineWidth;
+  this.currentLineCap = currentContext.lineCap;
+  this.currentLineJoin = currentContext.lineJoin;
+  this.currentMiterLimit = currentContext.miterLimit;
+};
+
+CVContextData.prototype.save = function (saveOnNativeFlag) {
+  if (saveOnNativeFlag) {
+    this.nativeContext.save();
+  }
+  var props = this.cTr.props;
+  if (this._length <= this.cArrPos) {
+    this.duplicate();
+  }
+
+  var currentStack = this.stack[this.cArrPos];
+  var i;
+  for (i = 0; i < 16; i += 1) {
+    currentStack.transform[i] = props[i];
+  }
+  this.cArrPos += 1;
+  var newStack = this.stack[this.cArrPos];
+  newStack.opacity = currentStack.opacity;
+  newStack.fillStyle = currentStack.fillStyle;
+  newStack.strokeStyle = currentStack.strokeStyle;
+  newStack.lineWidth = currentStack.lineWidth;
+  newStack.lineCap = currentStack.lineCap;
+  newStack.lineJoin = currentStack.lineJoin;
+  newStack.miterLimit = currentStack.miterLimit;
+};
+
+CVContextData.prototype.setOpacity = function (value) {
+  this.stack[this.cArrPos].opacity = value;
+};
+
+CVContextData.prototype.setContext = function (value) {
+  this.nativeContext = value;
+};
+
+CVContextData.prototype.fillStyle = function (value) {
+  if (this.stack[this.cArrPos].fillStyle !== value) {
+    this.currentFillStyle = value;
+    this.stack[this.cArrPos].fillStyle = value;
+  }
+};
+
+CVContextData.prototype.strokeStyle = function (value) {
+  if (this.stack[this.cArrPos].strokeStyle !== value) {
+    this.currentStrokeStyle = value;
+    this.stack[this.cArrPos].strokeStyle = value;
+  }
+};
+
+CVContextData.prototype.lineWidth = function (value) {
+  if (this.stack[this.cArrPos].lineWidth !== value) {
+    this.currentLineWidth = value;
+    this.stack[this.cArrPos].lineWidth = value;
+  }
+};
+
+CVContextData.prototype.lineCap = function (value) {
+  if (this.stack[this.cArrPos].lineCap !== value) {
+    this.currentLineCap = value;
+    this.stack[this.cArrPos].lineCap = value;
+  }
+};
+
+CVContextData.prototype.lineJoin = function (value) {
+  if (this.stack[this.cArrPos].lineJoin !== value) {
+    this.currentLineJoin = value;
+    this.stack[this.cArrPos].lineJoin = value;
+  }
+};
+
+CVContextData.prototype.miterLimit = function (value) {
+  if (this.stack[this.cArrPos].miterLimit !== value) {
+    this.currentMiterLimit = value;
+    this.stack[this.cArrPos].miterLimit = value;
+  }
+};
+
+CVContextData.prototype.transform = function (props) {
+  this.transformMat.cloneFromProps(props);
+  // Taking the last transform value from the stored stack of transforms
+  var currentTransform = this.cTr;
+  // Applying the last transform value after the new transform to respect the order of transformations
+  this.transformMat.multiply(currentTransform);
+  // Storing the new transformed value in the stored transform
+  currentTransform.cloneFromProps(this.transformMat.props);
+  var trProps = currentTransform.props;
+  // Applying the new transform to the canvas
+  this.nativeContext.setTransform(trProps[0], trProps[1], trProps[4], trProps[5], trProps[12], trProps[13]);
+};
+
+CVContextData.prototype.opacity = function (op) {
+  var currentOpacity = this.stack[this.cArrPos].opacity;
+  currentOpacity *= op < 0 ? 0 : op;
+  if (this.stack[this.cArrPos].opacity !== currentOpacity) {
+    if (this.currentOpacity !== op) {
+      this.nativeContext.globalAlpha = op;
+      this.currentOpacity = op;
+    }
+    this.stack[this.cArrPos].opacity = currentOpacity;
+  }
+};
+
+CVContextData.prototype.fill = function (rule) {
+  if (this.appliedFillStyle !== this.currentFillStyle) {
+    this.appliedFillStyle = this.currentFillStyle;
+    this.nativeContext.fillStyle = this.appliedFillStyle;
+  }
+  this.nativeContext.fill(rule);
+};
+
+CVContextData.prototype.fillRect = function (x, y, w, h) {
+  if (this.appliedFillStyle !== this.currentFillStyle) {
+    this.appliedFillStyle = this.currentFillStyle;
+    this.nativeContext.fillStyle = this.appliedFillStyle;
+  }
+  this.nativeContext.fillRect(x, y, w, h);
+};
+
+CVContextData.prototype.stroke = function () {
+  if (this.appliedStrokeStyle !== this.currentStrokeStyle) {
+    this.appliedStrokeStyle = this.currentStrokeStyle;
+    this.nativeContext.strokeStyle = this.appliedStrokeStyle;
+  }
+  if (this.appliedLineWidth !== this.currentLineWidth) {
+    this.appliedLineWidth = this.currentLineWidth;
+    this.nativeContext.lineWidth = this.appliedLineWidth;
+  }
+  if (this.appliedLineCap !== this.currentLineCap) {
+    this.appliedLineCap = this.currentLineCap;
+    this.nativeContext.lineCap = this.appliedLineCap;
+  }
+  if (this.appliedLineJoin !== this.currentLineJoin) {
+    this.appliedLineJoin = this.currentLineJoin;
+    this.nativeContext.lineJoin = this.appliedLineJoin;
+  }
+  if (this.appliedMiterLimit !== this.currentMiterLimit) {
+    this.appliedMiterLimit = this.currentMiterLimit;
+    this.nativeContext.miterLimit = this.appliedMiterLimit;
+  }
+  this.nativeContext.stroke();
+};
+
+export default CVContextData;

package/player/js/elements/canvasElements/CVEffects.js

@@ -0,0 +1,57 @@
+var registeredEffects = {};
+
+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;
+    var type = elem.data.ef[i].ty;
+    if (registeredEffects[type]) {
+      var Effect = registeredEffects[type].effect;
+      filterManager = new Effect(elem.effectsManager.effectElements[i], elem);
+    }
+    if (filterManager) {
+      this.filters.push(filterManager);
+    }
+  }
+  if (this.filters.length) {
+    elem.addRenderableComponent(this);
+  }
+}
+
+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) {
+  var i;
+  var len = this.filters.length;
+  var effects = [];
+  for (i = 0; i < len; i += 1) {
+    if (this.filters[i].type === type) {
+      effects.push(this.filters[i]);
+    }
+  }
+  return effects;
+};
+
+export function registerEffect(id, effect) {
+  registeredEffects[id] = {
+    effect,
+  };
+}
+
+export default CVEffects;

package/player/js/elements/canvasElements/CVImageElement.js

@@ -0,0 +1,58 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createTag from '../../utils/helpers/html_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import CVBaseElement from './CVBaseElement';
+import IImageElement from '../ImageElement';
+import SVGShapeElement from '../svgElements/SVGShapeElement';
+
+function CVImageElement(data, globalData, comp) {
+  this.assetData = globalData.getAssetData(data.refId);
+  this.img = globalData.imageLoader.getAsset(this.assetData);
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);
+
+CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement;
+CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
+
+CVImageElement.prototype.createContent = function () {
+  if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) {
+    var canvas = createTag('canvas');
+    canvas.width = this.assetData.w;
+    canvas.height = this.assetData.h;
+    var ctx = canvas.getContext('2d');
+
+    var imgW = this.img.width;
+    var imgH = this.img.height;
+    var imgRel = imgW / imgH;
+    var canvasRel = this.assetData.w / this.assetData.h;
+    var widthCrop;
+    var heightCrop;
+    var par = this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio;
+    if ((imgRel > canvasRel && par === 'xMidYMid slice') || (imgRel < canvasRel && par !== 'xMidYMid slice')) {
+      heightCrop = imgH;
+      widthCrop = heightCrop * canvasRel;
+    } else {
+      widthCrop = imgW;
+      heightCrop = widthCrop / canvasRel;
+    }
+    ctx.drawImage(this.img, (imgW - widthCrop) / 2, (imgH - heightCrop) / 2, widthCrop, heightCrop, 0, 0, this.assetData.w, this.assetData.h);
+    this.img = canvas;
+  }
+};
+
+CVImageElement.prototype.renderInnerContent = function () {
+  this.canvasContext.drawImage(this.img, 0, 0);
+};
+
+CVImageElement.prototype.destroy = function () {
+  this.img = null;
+};
+
+export default CVImageElement;

package/player/js/elements/canvasElements/CVMaskElement.js

@@ -0,0 +1,72 @@
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+
+import ShapePropertyFactory from '../../utils/shapes/ShapeProperty';
+import MaskElement from '../../mask';
+
+function CVMaskElement(data, element) {
+  this.data = data;
+  this.element = element;
+  this.masksProperties = this.data.masksProperties || [];
+  this.viewData = createSizedArray(this.masksProperties.length);
+  var i;
+  var len = this.masksProperties.length;
+  var hasMasks = false;
+  for (i = 0; i < len; i += 1) {
+    if (this.masksProperties[i].mode !== 'n') {
+      hasMasks = true;
+    }
+    this.viewData[i] = ShapePropertyFactory.getShapeProp(this.element, this.masksProperties[i], 3);
+  }
+  this.hasMasks = hasMasks;
+  if (hasMasks) {
+    this.element.addRenderableComponent(this);
+  }
+}
+
+CVMaskElement.prototype.renderFrame = function () {
+  if (!this.hasMasks) {
+    return;
+  }
+  var transform = this.element.finalTransform.mat;
+  var ctx = this.element.canvasContext;
+  var i;
+  var len = this.masksProperties.length;
+  var pt;
+  var pts;
+  var data;
+  ctx.beginPath();
+  for (i = 0; i < len; i += 1) {
+    if (this.masksProperties[i].mode !== 'n') {
+      if (this.masksProperties[i].inv) {
+        ctx.moveTo(0, 0);
+        ctx.lineTo(this.element.globalData.compSize.w, 0);
+        ctx.lineTo(this.element.globalData.compSize.w, this.element.globalData.compSize.h);
+        ctx.lineTo(0, this.element.globalData.compSize.h);
+        ctx.lineTo(0, 0);
+      }
+      data = this.viewData[i].v;
+      pt = transform.applyToPointArray(data.v[0][0], data.v[0][1], 0);
+      ctx.moveTo(pt[0], pt[1]);
+      var j;
+      var jLen = data._length;
+      for (j = 1; j < jLen; j += 1) {
+        pts = transform.applyToTriplePoints(data.o[j - 1], data.i[j], data.v[j]);
+        ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
+      }
+      pts = transform.applyToTriplePoints(data.o[j - 1], data.i[0], data.v[0]);
+      ctx.bezierCurveTo(pts[0], pts[1], pts[2], pts[3], pts[4], pts[5]);
+    }
+  }
+  this.element.globalData.renderer.save(true);
+  ctx.clip();
+};
+
+CVMaskElement.prototype.getMaskProperty = MaskElement.prototype.getMaskProperty;
+
+CVMaskElement.prototype.destroy = function () {
+  this.element = null;
+};
+
+export default CVMaskElement;