function CVTextElement(data, globalData, comp) {
  this.textSpans = [];
  this.yOffset = 0;
  this.fillColorAnim = false;
  this.strokeColorAnim = false;
  this.strokeWidthAnim = false;
  this.stroke = false;
  this.fill = false;
  this.justifyOffset = 0;
  this.currentRender = null;
  this.renderType = 'canvas';
  this.values = {
    fill: 'rgba(0,0,0,0)',
    stroke: 'rgba(0,0,0,0)',
    sWidth: 0,
    fValue: '',
  };
  this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement, ITextElement], CVTextElement);

CVTextElement.prototype.tHelper = createTag('canvas').getContext('2d');

CVTextElement.prototype.buildNewText = function () {
  var documentData = this.textProperty.currentData;
  this.renderedLetters = createSizedArray(documentData.l ? documentData.l.length : 0);

  var hasFill = false;
  if (documentData.fc) {
    hasFill = true;
    this.values.fill = this.buildColor(documentData.fc);
  } else {
    this.values.fill = 'rgba(0,0,0,0)';
  }
  this.fill = hasFill;
  var hasStroke = false;
  if (documentData.sc) {
    hasStroke = true;
    this.values.stroke = this.buildColor(documentData.sc);
    this.values.sWidth = documentData.sw;
  }
  var fontData = this.globalData.fontManager.getFontByName(documentData.f);
  var i,
    len;
  var letters = documentData.l;
  var matrixHelper = this.mHelper;
  this.stroke = hasStroke;
  this.values.fValue = documentData.finalSize + 'px ' + this.globalData.fontManager.getFontByName(documentData.f).fFamily;
  len = documentData.finalText.length;
  // this.tHelper.font = this.values.fValue;
  var charData,
    shapeData,
    k,
    kLen,
    shapes,
    j,
    jLen,
    pathNodes,
    commands,
    pathArr,
    singleShape = this.data.singleShape;
  var trackingOffset = documentData.tr * .001 * documentData.finalSize;
  var xPos = 0,
    yPos = 0,
    firstLine = true;
  var cnt = 0;
  for (i = 0; i < len; i += 1) {
    charData = this.globalData.fontManager.getCharData(documentData.finalText[i], fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
    shapeData = (charData && charData.data) || {};
    matrixHelper.reset();
    if (singleShape && letters[i].n) {
      xPos = -trackingOffset;
      yPos += documentData.yOffset;
      yPos += firstLine ? 1 : 0;
      firstLine = false;
    }

    shapes = shapeData.shapes ? shapeData.shapes[0].it : [];
    jLen = shapes.length;
    matrixHelper.scale(documentData.finalSize / 100, documentData.finalSize / 100);
    if (singleShape) {
      this.applyTextPropertiesToMatrix(documentData, matrixHelper, letters[i].line, xPos, yPos);
    }
    commands = createSizedArray(jLen);
    for (j = 0; j < jLen; j += 1) {
      kLen = shapes[j].ks.k.i.length;
      pathNodes = shapes[j].ks.k;
      pathArr = [];
      for (k = 1; k < kLen; k += 1) {
        if (k == 1) {
          pathArr.push(matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
        }
        pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToY(pathNodes.i[k][0], pathNodes.i[k][1], 0), matrixHelper.applyToX(pathNodes.v[k][0], pathNodes.v[k][1], 0), matrixHelper.applyToY(pathNodes.v[k][0], pathNodes.v[k][1], 0));
      }
      pathArr.push(matrixHelper.applyToX(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToY(pathNodes.o[k - 1][0], pathNodes.o[k - 1][1], 0), matrixHelper.applyToX(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToY(pathNodes.i[0][0], pathNodes.i[0][1], 0), matrixHelper.applyToX(pathNodes.v[0][0], pathNodes.v[0][1], 0), matrixHelper.applyToY(pathNodes.v[0][0], pathNodes.v[0][1], 0));
      commands[j] = pathArr;
    }
    if (singleShape) {
      xPos += letters[i].l;
      xPos += trackingOffset;
    }
    if (this.textSpans[cnt]) {
      this.textSpans[cnt].elem = commands;
    } else {
      this.textSpans[cnt] = { elem: commands };
    }
    cnt += 1;
  }
};

CVTextElement.prototype.renderInnerContent = function () {
  var ctx = this.canvasContext;
  var finalMat = this.finalTransform.mat.props;
  ctx.font = this.values.fValue;
  ctx.lineCap = 'butt';
  ctx.lineJoin = 'miter';
  ctx.miterLimit = 4;

  if (!this.data.singleShape) {
    this.textAnimator.getMeasures(this.textProperty.currentData, this.lettersChangedFlag);
  }

  var i,
    len,
    j,
    jLen,
    k,
    kLen;
  var renderedLetters = this.textAnimator.renderedLetters;

  var letters = this.textProperty.currentData.l;

  len = letters.length;
  var renderedLetter;
  var lastFill = null,
    lastStroke = null,
    lastStrokeW = null,
    commands,
    pathArr;
  for (i = 0; i < len; i += 1) {
    if (letters[i].n) {
      continue;
    }
    renderedLetter = renderedLetters[i];
    if (renderedLetter) {
      this.globalData.renderer.save();
      this.globalData.renderer.ctxTransform(renderedLetter.p);
      this.globalData.renderer.ctxOpacity(renderedLetter.o);
    }
    if (this.fill) {
      if (renderedLetter && renderedLetter.fc) {
        if (lastFill !== renderedLetter.fc) {
          lastFill = renderedLetter.fc;
          ctx.fillStyle = renderedLetter.fc;
        }
      } else if (lastFill !== this.values.fill) {
        lastFill = this.values.fill;
        ctx.fillStyle = this.values.fill;
      }
      commands = this.textSpans[i].elem;
      jLen = commands.length;
      this.globalData.canvasContext.beginPath();
      for (j = 0; j < jLen; j += 1) {
        pathArr = commands[j];
        kLen = pathArr.length;
        this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
        for (k = 2; k < kLen; k += 6) {
          this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
        }
      }
      this.globalData.canvasContext.closePath();
      this.globalData.canvasContext.fill();
      /// ctx.fillText(this.textSpans[i].val,0,0);
    }
    if (this.stroke) {
      if (renderedLetter && renderedLetter.sw) {
        if (lastStrokeW !== renderedLetter.sw) {
          lastStrokeW = renderedLetter.sw;
          ctx.lineWidth = renderedLetter.sw;
        }
      } else if (lastStrokeW !== this.values.sWidth) {
        lastStrokeW = this.values.sWidth;
        ctx.lineWidth = this.values.sWidth;
      }
      if (renderedLetter && renderedLetter.sc) {
        if (lastStroke !== renderedLetter.sc) {
          lastStroke = renderedLetter.sc;
          ctx.strokeStyle = renderedLetter.sc;
        }
      } else if (lastStroke !== this.values.stroke) {
        lastStroke = this.values.stroke;
        ctx.strokeStyle = this.values.stroke;
      }
      commands = this.textSpans[i].elem;
      jLen = commands.length;
      this.globalData.canvasContext.beginPath();
      for (j = 0; j < jLen; j += 1) {
        pathArr = commands[j];
        kLen = pathArr.length;
        this.globalData.canvasContext.moveTo(pathArr[0], pathArr[1]);
        for (k = 2; k < kLen; k += 6) {
          this.globalData.canvasContext.bezierCurveTo(pathArr[k], pathArr[k + 1], pathArr[k + 2], pathArr[k + 3], pathArr[k + 4], pathArr[k + 5]);
        }
      }
      this.globalData.canvasContext.closePath();
      this.globalData.canvasContext.stroke();
      /// ctx.strokeText(letters[i].val,0,0);
    }
    if (renderedLetter) {
      this.globalData.renderer.restore();
    }
  }
};