text: /*!!
   *  Canvas 2 Svg v1.0.19
   *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
   *
   *  Licensed under the MIT license:
   *  http://www.opensource.org/licenses/mit-license.php
   *
   *  Author:
   *  Kerry Liu
   *
   *  Copyright (c) 2014 Gliffy Inc.
   */
  
  ;(function () {
      'use strict'
  
      var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities
  
      //helper function to format a string
      function format (str, args) {
          var keys = Object.keys(args), i
          for (i = 0; i < keys.length; i++) {
              str = str.replace(new RegExp('\\{' + keys[i] + '\\}', 'gi'), args[keys[i]])
          }
          return str
      }
  
      //helper function that generates a random string
      function randomString (holder) {
          var chars, randomstring, i
          if (!holder) {
              throw new Error('cannot create a random attribute name for an undefined object')
          }
          chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'
          randomstring = ''
          do {
              randomstring = ''
              for (i = 0; i < 12; i++) {
                  randomstring += chars[Math.floor(Math.random() * chars.length)]
              }
          } while (holder[randomstring])
          return randomstring
      }
  
      //helper function to map named to numbered entities
      function createNamedToNumberedLookup (items, radix) {
          var i, entity, lookup = {}, base10, base16
          items = items.split(',')
          radix = radix || 10
          // Map from named to numbered entities.
          for (i = 0; i < items.length; i += 2) {
              entity = '&' + items[i + 1] + ';'
              base10 = parseInt(items[i], radix)
              lookup[entity] = '&#' + base10 + ';'
          }
          //FF and IE need to create a regex from hex values ie &nbsp; == \xa0
          lookup['\\xa0'] = '&#160;'
          return lookup
      }
  
      //helper function to map canvas-textAlign to svg-textAnchor
      function getTextAnchor (textAlign) {
          //TODO: support rtl languages
          var mapping = { 'left': 'start', 'right': 'end', 'center': 'middle', 'start': 'start', 'end': 'end' }
          return mapping[textAlign] || mapping.start
      }
  
      //helper function to map canvas-textBaseline to svg-dominantBaseline
      function getDominantBaseline (textBaseline) {
          //INFO: not supported in all browsers
          var mapping = {
              'alphabetic': 'alphabetic',
              'hanging': 'hanging',
              'top': 'text-before-edge',
              'bottom': 'text-after-edge',
              'middle': 'central'
          }
          return mapping[textBaseline] || mapping.alphabetic
      }
  
      // Unpack entities lookup where the numbers are in radix 32 to reduce the size
      // entity mapping courtesy of tinymce
      namedEntities = createNamedToNumberedLookup(
          '50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
          '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
          '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
          '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
          '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
          '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
          '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
          '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
          '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
          '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
          'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
          'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
          't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
          'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
          'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
          '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
          '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
          '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
          '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
          '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
          'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
          'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
          'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
          '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
          '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32)
  
      //Some basic mappings for attributes and default values.
      STYLES = {
          'strokeStyle': {
              svgAttr: 'stroke', //corresponding svg attribute
              canvas: '#000000', //canvas default
              svg: 'none',       //svg default
              apply: 'stroke'    //apply on stroke() or fill()
          },
          'fillStyle': {
              svgAttr: 'fill',
              canvas: '#000000',
              svg: null, //svg default is black, but we need to special case this to handle canvas stroke without fill
              apply: 'fill'
          },
          'lineCap': {
              svgAttr: 'stroke-linecap',
              canvas: 'butt',
              svg: 'butt',
              apply: 'stroke'
          },
          'lineJoin': {
              svgAttr: 'stroke-linejoin',
              canvas: 'miter',
              svg: 'miter',
              apply: 'stroke'
          },
          'miterLimit': {
              svgAttr: 'stroke-miterlimit',
              canvas: 10,
              svg: 4,
              apply: 'stroke'
          },
          'lineWidth': {
              svgAttr: 'stroke-width',
              canvas: 1,
              svg: 1,
              apply: 'stroke'
          },
          'globalAlpha': {
              svgAttr: 'opacity',
              canvas: 1,
              svg: 1,
              apply: 'fill stroke'
          },
          'font': {
              //font converts to multiple svg attributes, there is custom logic for this
              canvas: '12px Arial'
          },
          'shadowColor': {
              canvas: '#000000'
          },
          'shadowOffsetX': {
              canvas: 0
          },
          'shadowOffsetY': {
              canvas: 0
          },
          'shadowBlur': {
              canvas: 0
          },
          'textAlign': {
              canvas: 'start'
          },
          'textBaseline': {
              canvas: 'alphabetic'
          },
          'lineDash': {
              svgAttr: 'stroke-dasharray',
              canvas: [],
              svg: null,
              apply: 'stroke'
          }
      }
  
      /**
       *
       * @param gradientNode - reference to the gradient
       * @constructor
       */
      CanvasGradient = function (gradientNode, ctx) {
          this.__root = gradientNode
          this.__ctx = ctx
      }
  
      /**
       * Adds a color stop to the gradient root
       */
      CanvasGradient.prototype.addColorStop = function (offset, color) {
          var stop = this.__ctx.__createElement('stop'), regex, matches
          stop.setAttribute('offset', offset)
          if (color.indexOf('rgba') !== -1) {
              //separate alpha value, since webkit can't handle it
              regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi
              matches = regex.exec(color)
              stop.setAttribute('stop-color', format('rgb({r},{g},{b})', {
                  r: matches[1],
                  g: matches[2],
                  b: matches[3]
              }))
              stop.setAttribute('stop-opacity', matches[4])
          } else {
              stop.setAttribute('stop-color', color)
          }
          this.__root.appendChild(stop)
      }
  
      CanvasPattern = function (pattern, ctx) {
          this.__root = pattern
          this.__ctx = ctx
      }
  
      /**
       * The mock canvas context
       * @param o - options include:
       * ctx - existing Context2D to wrap around
       * width - width of your canvas (defaults to 500)
       * height - height of your canvas (defaults to 500)
       * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
       * document - the document object (defaults to the current document)
       */
      ctx = function (o) {
          var defaultOptions = { width: 500, height: 500, enableMirroring: false }, options
  
          //keep support for this way of calling C2S: new C2S(width,height)
          if (arguments.length > 1) {
              options = defaultOptions
              options.width = arguments[0]
              options.height = arguments[1]
          } else if (!o) {
              options = defaultOptions
          } else {
              options = o
          }
  
          if (!(this instanceof ctx)) {
              //did someone call this without new?
              return new ctx(options)
          }
  
          //setup options
          this.width = options.width || defaultOptions.width
          this.height = options.height || defaultOptions.height
          this.enableMirroring = options.enableMirroring !== undefined ? options.enableMirroring : defaultOptions.enableMirroring
  
          this.canvas = this   ///point back to this instance!
          this.__document = options.document || document
  
          // allow passing in an existing context to wrap around
          // if a context is passed in, we know a canvas already exist
          if (options.ctx) {
              this.__ctx = options.ctx
          } else {
              this.__canvas = this.__document.createElement('canvas')
              this.__ctx = this.__canvas.getContext('2d')
          }
  
          this.__setDefaultStyles()
          this.__stack = [this.__getStyleState()]
          this.__groupStack = []
  
          //the root svg element
          this.__root = this.__document.createElementNS('http://www.w3.org/2000/svg', 'svg')
          this.__root.setAttribute('version', 1.1)
          this.__root.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
          this.__root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink')
          this.__root.setAttribute('width', this.width)
          this.__root.setAttribute('height', this.height)
  
          //make sure we don't generate the same ids in defs
          this.__ids = {}
  
          //defs tag
          this.__defs = this.__document.createElementNS('http://www.w3.org/2000/svg', 'defs')
          this.__root.appendChild(this.__defs)
  
          //also add a group child. the svg element can't use the transform attribute
          this.__currentElement = this.__document.createElementNS('http://www.w3.org/2000/svg', 'g')
          this.__root.appendChild(this.__currentElement)
      }
  
      /**
       * Creates the specified svg element
       * @private
       */
      ctx.prototype.__createElement = function (elementName, properties, resetFill) {
          if (typeof properties === 'undefined') {
              properties = {}
          }
  
          var element = this.__document.createElementNS('http://www.w3.org/2000/svg', elementName),
              keys = Object.keys(properties), i, key
          if (resetFill) {
              //if fill or stroke is not specified, the svg element should not display. By default SVG's fill is black.
              element.setAttribute('fill', 'none')
              element.setAttribute('stroke', 'none')
          }
          for (i = 0; i < keys.length; i++) {
              key = keys[i]
              element.setAttribute(key, properties[key])
          }
          return element
      }
  
      /**
       * Applies default canvas styles to the context
       * @private
       */
      ctx.prototype.__setDefaultStyles = function () {
          //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
          var keys = Object.keys(STYLES), i, key
          for (i = 0; i < keys.length; i++) {
              key = keys[i]
              this[key] = STYLES[key].canvas
          }
      }
  
      /**
       * Applies styles on restore
       * @param styleState
       * @private
       */
      ctx.prototype.__applyStyleState = function (styleState) {
          var keys = Object.keys(styleState), i, key
          for (i = 0; i < keys.length; i++) {
              key = keys[i]
              this[key] = styleState[key]
          }
      }
  
      /**
       * Gets the current style state
       * @return {Object}
       * @private
       */
      ctx.prototype.__getStyleState = function () {
          var i, styleState = {}, keys = Object.keys(STYLES), key
          for (i = 0; i < keys.length; i++) {
              key = keys[i]
              styleState[key] = this[key]
          }
          return styleState
      }
  
      /**
       * Apples the current styles to the current SVG element. On "ctx.fill" or "ctx.stroke"
       * @param type
       * @private
       */
      ctx.prototype.__applyStyleToCurrentElement = function (type) {
          var currentElement = this.__currentElement
          var currentStyleGroup = this.__currentElementsToStyle
          if (currentStyleGroup) {
              currentElement.setAttribute(type, '')
              currentElement = currentStyleGroup.element
              currentStyleGroup.children.forEach(function (node) {
                  node.setAttribute(type, '')
              })
          }
  
          var keys = Object.keys(STYLES), i, style, value, id, regex, matches
          for (i = 0; i < keys.length; i++) {
              style = STYLES[keys[i]]
              value = this[keys[i]]
              if (style.apply) {
                  //is this a gradient or pattern?
                  if (value instanceof CanvasPattern) {
                      //pattern
                      if (value.__ctx) {
                          //copy over defs
                          while (value.__ctx.__defs.childNodes.length) {
                              id = value.__ctx.__defs.childNodes[0].getAttribute('id')
                              this.__ids[id] = id
                              this.__defs.appendChild(value.__ctx.__defs.childNodes[0])
                          }
                      }
                      currentElement.setAttribute(style.apply, format('url(#{id})', { id: value.__root.getAttribute('id') }))
                  } else if (value instanceof CanvasGradient) {
                      //gradient
                      currentElement.setAttribute(style.apply, format('url(#{id})', { id: value.__root.getAttribute('id') }))
                  } else if (style.apply.indexOf(type) !== -1 && style.svg !== value) {
                      if ((style.svgAttr === 'stroke' || style.svgAttr === 'fill') && value.indexOf('rgba') !== -1) {
                          //separate alpha value, since illustrator can't handle it
                          regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi
                          matches = regex.exec(value)
                          currentElement.setAttribute(style.svgAttr, format('rgb({r},{g},{b})', {
                              r: matches[1],
                              g: matches[2],
                              b: matches[3]
                          }))
                          //should take globalAlpha here
                          var opacity = matches[4]
                          var globalAlpha = this.globalAlpha
                          if (globalAlpha != null) {
                              opacity *= globalAlpha
                          }
                          currentElement.setAttribute(style.svgAttr + '-opacity', opacity)
                      } else {
                          var attr = style.svgAttr
                          if (keys[i] === 'globalAlpha') {
                              attr = type + '-' + style.svgAttr
                              if (currentElement.getAttribute(attr)) {
                                  //fill-opacity or stroke-opacity has already been set by stroke or fill.
                                  continue
                              }
                          }
                          //otherwise only update attribute if right type, and not svg default
                          currentElement.setAttribute(attr, value)
                      }
                  }
              }
          }
      }
  
      /**
       * Will return the closest group or svg node. May return the current element.
       * @private
       */
      ctx.prototype.__closestGroupOrSvg = function (node) {
          node = node || this.__currentElement
          if (node.nodeName === 'g' || node.nodeName === 'svg') {
              return node
          } else {
              return this.__closestGroupOrSvg(node.parentNode)
          }
      }
  
      /**
       * Returns the serialized value of the svg so far
       * @param fixNamedEntities - Standalone SVG doesn't support named entities, which document.createTextNode encodes.
       *                           If true, we attempt to find all named entities and encode it as a numeric entity.
       * @return serialized svg
       */
      ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
          var serialized = new XMLSerializer().serializeToString(this.__root),
              keys, i, key, value, regexp, xmlns
  
          //IE search for a duplicate xmnls because they didn't implement setAttributeNS correctly
          xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi
          if (xmlns.test(serialized)) {
              serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg', 'xmlns:xlink="http://www.w3.org/1999/xlink')
          }
  
          if (fixNamedEntities) {
              keys = Object.keys(namedEntities)
              //loop over each named entity and replace with the proper equivalent.
              for (i = 0; i < keys.length; i++) {
                  key = keys[i]
                  value = namedEntities[key]
                  regexp = new RegExp(key, 'gi')
                  if (regexp.test(serialized)) {
                      serialized = serialized.replace(regexp, value)
                  }
              }
          }
  
          return serialized
      }
  
      /**
       * Returns the root svg
       * @return
       */
      ctx.prototype.getSvg = function () {
          return this.__root
      }
      /**
       * Will generate a group tag.
       */
      ctx.prototype.save = function () {
          var group = this.__createElement('g')
          var parent = this.__closestGroupOrSvg()
          this.__groupStack.push(parent)
          parent.appendChild(group)
          this.__currentElement = group
          this.__stack.push(this.__getStyleState())
      }
      /**
       * Sets current element to parent, or just root if already root
       */
      ctx.prototype.restore = function () {
          this.__currentElement = this.__groupStack.pop()
          this.__currentElementsToStyle = null
          //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
          if (!this.__currentElement) {
              this.__currentElement = this.__root.childNodes[1]
          }
          var state = this.__stack.pop()
          this.__applyStyleState(state)
      }
  
      /**
       * Helper method to add transform
       * @private
       */
      ctx.prototype.__addTransform = function (t) {
          //if the current element has siblings, add another group
          var parent = this.__closestGroupOrSvg()
          if (parent.childNodes.length > 0) {
              if (this.__currentElement.nodeName === 'path') {
                  if (!this.__currentElementsToStyle) this.__currentElementsToStyle = { element: parent, children: [] }
                  this.__currentElementsToStyle.children.push(this.__currentElement)
                  this.__applyCurrentDefaultPath()
              }
  
              var group = this.__createElement('g')
              parent.appendChild(group)
              this.__currentElement = group
          }
  
          var transform = this.__currentElement.getAttribute('transform')
          if (transform) {
              transform += ' '
          } else {
              transform = ''
          }
          transform += t
          this.__currentElement.setAttribute('transform', transform)
      }
  
      /**
       *  scales the current element
       */
      ctx.prototype.scale = function (x, y) {
          if (y === undefined) {
              y = x
          }
          this.__addTransform(format('scale({x},{y})', { x: x, y: y }))
      }
  
      /**
       * rotates the current element
       */
      ctx.prototype.rotate = function (angle) {
          var degrees = (angle * 180 / Math.PI)
          this.__addTransform(format('rotate({angle},{cx},{cy})', { angle: degrees, cx: 0, cy: 0 }))
      }
  
      /**
       * translates the current element
       */
      ctx.prototype.translate = function (x, y) {
          this.__addTransform(format('translate({x},{y})', { x: x, y: y }))
      }
  
      /**
       * applies a transform to the current element
       */
      ctx.prototype.transform = function (a, b, c, d, e, f) {
          this.__addTransform(format('matrix({a},{b},{c},{d},{e},{f})', { a: a, b: b, c: c, d: d, e: e, f: f }))
      }
  
      /**
       * Create a new Path Element
       */
      ctx.prototype.beginPath = function () {
          var path, parent
  
          // Note that there is only one current default path, it is not part of the drawing state.
          // See also: https://html.spec.whatwg.org/multipage/scripting.html#current-default-path
          this.__currentDefaultPath = ''
          this.__currentPosition = {}
  
          path = this.__createElement('path', {}, true)
          parent = this.__closestGroupOrSvg()
          parent.appendChild(path)
          this.__currentElement = path
      }
  
      /**
       * Helper function to apply currentDefaultPath to current path element
       * @private
       */
      ctx.prototype.__applyCurrentDefaultPath = function () {
          var currentElement = this.__currentElement
          if (currentElement.nodeName === 'path') {
              currentElement.setAttribute('d', this.__currentDefaultPath)
          } else {
              console.error('Attempted to apply path command to node', currentElement.nodeName)
          }
      }
  
      /**
       * Helper function to add path command
       * @private
       */
      ctx.prototype.__addPathCommand = function (command) {
          this.__currentDefaultPath += ' '
          this.__currentDefaultPath += command
      }
  
      /**
       * Adds the move command to the current path element,
       * if the currentPathElement is not empty create a new path element
       */
      ctx.prototype.moveTo = function (x, y) {
          if (this.__currentElement.nodeName !== 'path') {
              this.beginPath()
          }
  
          // creates a new subpath with the given point
          this.__currentPosition = { x: x, y: y }
          this.__addPathCommand(format('M {x} {y}', { x: x, y: y }))
      }
  
      /**
       * Closes the current path
       */
      ctx.prototype.closePath = function () {
          if (this.__currentDefaultPath) {
              this.__addPathCommand('Z')
          }
      }
  
      /**
       * Adds a line to command
       */
      ctx.prototype.lineTo = function (x, y) {
          this.__currentPosition = { x: x, y: y }
          if (this.__currentDefaultPath.indexOf('M') > -1) {
              this.__addPathCommand(format('L {x} {y}', { x: x, y: y }))
          } else {
              this.__addPathCommand(format('M {x} {y}', { x: x, y: y }))
          }
      }
  
      /**
       * Add a bezier command
       */
      ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
          this.__currentPosition = { x: x, y: y }
          this.__addPathCommand(format('C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}',
              { cp1x: cp1x, cp1y: cp1y, cp2x: cp2x, cp2y: cp2y, x: x, y: y }))
      }
  
      /**
       * Adds a quadratic curve to command
       */
      ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
          this.__currentPosition = { x: x, y: y }
          this.__addPathCommand(format('Q {cpx} {cpy} {x} {y}', { cpx: cpx, cpy: cpy, x: x, y: y }))
      }
  
      /**
       * Return a new normalized vector of given vector
       */
      var normalize = function (vector) {
          var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1])
          return [vector[0] / len, vector[1] / len]
      }
  
      /**
       * Adds the arcTo to the current path
       *
       * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
       */
      ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
          // Let the point (x0, y0) be the last point in the subpath.
          var x0 = this.__currentPosition && this.__currentPosition.x
          var y0 = this.__currentPosition && this.__currentPosition.y
  
          // First ensure there is a subpath for (x1, y1).
          if (typeof x0 == 'undefined' || typeof y0 == 'undefined') {
              return
          }
  
          // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
          if (radius < 0) {
              throw new Error('IndexSizeError: The radius provided (' + radius + ') is negative.')
          }
  
          // If the point (x0, y0) is equal to the point (x1, y1),
          // or if the point (x1, y1) is equal to the point (x2, y2),
          // or if the radius radius is zero,
          // then the method must add the point (x1, y1) to the subpath,
          // and connect that point to the previous point (x0, y0) by a straight line.
          if (((x0 === x1) && (y0 === y1))
              || ((x1 === x2) && (y1 === y2))
              || (radius === 0)) {
              this.lineTo(x1, y1)
              return
          }
  
          // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
          // then the method must add the point (x1, y1) to the subpath,
          // and connect that point to the previous point (x0, y0) by a straight line.
          var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1])
          var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1])
          if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
              this.lineTo(x1, y1)
              return
          }
  
          // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
          // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
          // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
          // The points at which this circle touches these two lines are called the start and end tangent points respectively.
  
          // note that both vectors are unit vectors, so the length is 1
          var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1])
          var theta = Math.acos(Math.abs(cos))
  
          // Calculate origin
          var unit_vec_p1_origin = normalize([
              unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
              unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
          ])
          var len_p1_origin = radius / Math.sin(theta / 2)
          var x = x1 + len_p1_origin * unit_vec_p1_origin[0]
          var y = y1 + len_p1_origin * unit_vec_p1_origin[1]
  
          // Calculate start angle and end angle
          // rotate 90deg clockwise (note that y axis points to its down)
          var unit_vec_origin_start_tangent = [
              -unit_vec_p1_p0[1],
              unit_vec_p1_p0[0]
          ]
          // rotate 90deg counter clockwise (note that y axis points to its down)
          var unit_vec_origin_end_tangent = [
              unit_vec_p1_p2[1],
              -unit_vec_p1_p2[0]
          ]
          var getAngle = function (vector) {
              // get angle (clockwise) between vector and (1, 0)
              var x = vector[0]
              var y = vector[1]
              if (y >= 0) { // note that y axis points to its down
                  return Math.acos(x)
              } else {
                  return -Math.acos(x)
              }
          }
          var startAngle = getAngle(unit_vec_origin_start_tangent)
          var endAngle = getAngle(unit_vec_origin_end_tangent)
  
          // Connect the point (x0, y0) to the start tangent point by a straight line
          this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
              y + unit_vec_origin_start_tangent[1] * radius)
  
          // Connect the start tangent point to the end tangent point by arc
          // and adding the end tangent point to the subpath.
          this.arc(x, y, radius, startAngle, endAngle)
      }
  
      /**
       * Sets the stroke property on the current element
       */
      ctx.prototype.stroke = function () {
          if (this.__currentElement.nodeName === 'path') {
              this.__currentElement.setAttribute('paint-order', 'fill stroke markers')
          }
          this.__applyCurrentDefaultPath()
          this.__applyStyleToCurrentElement('stroke')
      }
  
      /**
       * Sets fill properties on the current element
       */
      ctx.prototype.fill = function () {
          if (this.__currentElement.nodeName === 'path') {
              this.__currentElement.setAttribute('paint-order', 'stroke fill markers')
          }
          this.__applyCurrentDefaultPath()
          this.__applyStyleToCurrentElement('fill')
      }
  
      /**
       *  Adds a rectangle to the path.
       */
      ctx.prototype.rect = function (x, y, width, height) {
          if (this.__currentElement.nodeName !== 'path') {
              this.beginPath()
          }
          this.moveTo(x, y)
          this.lineTo(x + width, y)
          this.lineTo(x + width, y + height)
          this.lineTo(x, y + height)
          this.lineTo(x, y)
          this.closePath()
      }
  
      /**
       * adds a rectangle element
       */
      ctx.prototype.fillRect = function (x, y, width, height) {
          var rect, parent
          rect = this.__createElement('rect', {
              x: x,
              y: y,
              width: width,
              height: height
          }, true)
          parent = this.__closestGroupOrSvg()
          parent.appendChild(rect)
          this.__currentElement = rect
          this.__applyStyleToCurrentElement('fill')
      }
  
      /**
       * Draws a rectangle with no fill
       * @param x
       * @param y
       * @param width
       * @param height
       */
      ctx.prototype.strokeRect = function (x, y, width, height) {
          var rect, parent
          rect = this.__createElement('rect', {
              x: x,
              y: y,
              width: width,
              height: height
          }, true)
          parent = this.__closestGroupOrSvg()
          parent.appendChild(rect)
          this.__currentElement = rect
          this.__applyStyleToCurrentElement('stroke')
      }
  
      /**
       * Clear entire canvas:
       * 1. save current transforms
       * 2. remove all the childNodes of the root g element
       */
      ctx.prototype.__clearCanvas = function () {
          var current = this.__closestGroupOrSvg(),
              transform = current.getAttribute('transform')
          var rootGroup = this.__root.childNodes[1]
          var childNodes = rootGroup.childNodes
          for (var i = childNodes.length - 1; i >= 0; i--) {
              if (childNodes[i]) {
                  rootGroup.removeChild(childNodes[i])
              }
          }
          this.__currentElement = rootGroup
          //reset __groupStack as all the child group nodes are all removed.
          this.__groupStack = []
          if (transform) {
              this.__addTransform(transform)
          }
      }
  
      /**
       * "Clears" a canvas by just drawing a white rectangle in the current group.
       */
      ctx.prototype.clearRect = function (x, y, width, height) {
          //clear entire canvas
          if (x === 0 && y === 0 && width === this.width && height === this.height) {
              this.__clearCanvas()
              return
          }
          var rect, parent = this.__closestGroupOrSvg()
          rect = this.__createElement('rect', {
              x: x,
              y: y,
              width: width,
              height: height,
              fill: '#FFFFFF'
          }, true)
          parent.appendChild(rect)
      }
  
      /**
       * Adds a linear gradient to a defs tag.
       * Returns a canvas gradient object that has a reference to it's parent def
       */
      ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {
          var grad = this.__createElement('linearGradient', {
              id: randomString(this.__ids),
              x1: x1 + 'px',
              x2: x2 + 'px',
              y1: y1 + 'px',
              y2: y2 + 'px',
              'gradientUnits': 'userSpaceOnUse'
          }, false)
          this.__defs.appendChild(grad)
          return new CanvasGradient(grad, this)
      }
  
      /**
       * Adds a radial gradient to a defs tag.
       * Returns a canvas gradient object that has a reference to it's parent def
       */
      ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
          var grad = this.__createElement('radialGradient', {
              id: randomString(this.__ids),
              cx: x1 + 'px',
              cy: y1 + 'px',
              r: r1 + 'px',
              fx: x0 + 'px',
              fy: y0 + 'px',
              'gradientUnits': 'userSpaceOnUse'
          }, false)
          this.__defs.appendChild(grad)
          return new CanvasGradient(grad, this)
  
      }
  
      /**
       * Parses the font string and returns svg mapping
       * @private
       */
      ctx.prototype.__parseFont = function () {
  
          var fontPart = this.font.split(' ') || []
          if (fontPart[3] && fontPart[3].indexOf('/') > -1) {
              fontPart[3] = fontPart[3].split('/')[0]
          }
          var family = ''
          for (var i = 4; i < fontPart.length; ++i) {
              family += fontPart[i] + ' '
          }
  
          if (fontPart.length === 2) {
              family = fontPart[1]
              fontPart = ['normal', 'normal', 'normal', fontPart[0]]
          }
  
          var data = {
              style: fontPart[0] || 'normal',
              size: fontPart[3] || '12px',
              family: family || 'Arial',
              weight: fontPart[2] || 'normal',
              decoration: fontPart[1] || 'normal',
              href: null
          }
  
          //canvas doesn't support underline natively, but we can pass this attribute
          if (this.__fontUnderline === 'underline') {
              data.decoration = 'underline'
          }
  
          //canvas also doesn't support linking, but we can pass this as well
          if (this.__fontHref) {
              data.href = this.__fontHref
          }
  
          return data
      }
  
      /**
       * Helper to link text fragments
       * @param font
       * @param element
       * @return {*}
       * @private
       */
      ctx.prototype.__wrapTextLink = function (font, element) {
          if (font.href) {
              var a = this.__createElement('a')
              a.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', font.href)
              a.appendChild(element)
              return a
          }
          return element
      }
  
      /**
       * Fills or strokes text
       * @param text
       * @param x
       * @param y
       * @param action - stroke or fill
       * @private
       */
      ctx.prototype.__applyText = function (text, x, y, action) {
          var font = this.__parseFont(),
              parent = this.__closestGroupOrSvg(),
              textElement = this.__createElement('text', {
                  'font-family': font.family,
                  'font-size': font.size,
                  'font-style': font.style,
                  'font-weight': font.weight,
                  'text-decoration': font.decoration,
                  'x': x,
                  'y': y,
                  'text-anchor': getTextAnchor(this.textAlign),
                  'dominant-baseline': getDominantBaseline(this.textBaseline)
              }, true)
  
          if (font.family === 'topology') {
              text = '--le5le--' + (+text.charCodeAt()).toString(16) + ';'
          }
          textElement.appendChild(this.__document.createTextNode(text))
          this.__currentElement = textElement
          this.__applyStyleToCurrentElement(action)
          parent.appendChild(this.__wrapTextLink(font, textElement))
      }
  
      /**
       * Creates a text element
       * @param text
       * @param x
       * @param y
       */
      ctx.prototype.fillText = function (text, x, y) {
          this.__applyText(text, x, y, 'fill')
      }
  
      /**
       * Strokes text
       * @param text
       * @param x
       * @param y
       */
      ctx.prototype.strokeText = function (text, x, y) {
          this.__applyText(text, x, y, 'stroke')
      }
  
      /**
       * No need to implement this for svg.
       * @param text
       * @return {TextMetrics}
       */
      ctx.prototype.measureText = function (text) {
          this.__ctx.font = this.font
          return this.__ctx.measureText(text)
      }
  
      /**
       *  Arc command!
       */
      ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
          // in canvas no circle is drawn if no angle is provided.
          if (startAngle === endAngle) {
              return
          }
  
          if (this.__currentElement.nodeName !== 'path') {
              this.beginPath()
          }
  
          startAngle = startAngle % (2 * Math.PI)
          endAngle = endAngle % (2 * Math.PI)
          if (startAngle === endAngle) {
              //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
              endAngle = ((endAngle + (2 * Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2 * Math.PI)
          }
          var endX = x + radius * Math.cos(endAngle),
              endY = y + radius * Math.sin(endAngle),
              startX = x + radius * Math.cos(startAngle),
              startY = y + radius * Math.sin(startAngle),
              sweepFlag = counterClockwise ? 0 : 1,
              largeArcFlag = 0,
              diff = endAngle - startAngle
  
          // https://github.com/gliffy/canvas2svg/issues/4
          if (diff < 0) {
              diff += 2 * Math.PI
          }
  
          if (counterClockwise) {
              largeArcFlag = diff > Math.PI ? 0 : 1
          } else {
              largeArcFlag = diff > Math.PI ? 1 : 0
          }
  
          this.lineTo(startX, startY)
          this.__addPathCommand(format('A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}',
              {
                  rx: radius,
                  ry: radius,
                  xAxisRotation: 0,
                  largeArcFlag: largeArcFlag,
                  sweepFlag: sweepFlag,
                  endX: endX,
                  endY: endY
              }))
  
          this.__currentPosition = { x: endX, y: endY }
      }
  
      /**
       * Generates a ClipPath from the clip command.
       */
      ctx.prototype.clip = function () {
          var group = this.__closestGroupOrSvg(),
              clipPath = this.__createElement('clipPath'),
              id = randomString(this.__ids),
              newGroup = this.__createElement('g')
  
          this.__applyCurrentDefaultPath()
          group.removeChild(this.__currentElement)
          clipPath.setAttribute('id', id)
          clipPath.appendChild(this.__currentElement)
  
          this.__defs.appendChild(clipPath)
  
          //set the clip path to this group
          group.setAttribute('clip-path', format('url(#{id})', { id: id }))
  
          //clip paths can be scaled and transformed, we need to add another wrapper group to avoid later transformations
          // to this path
          group.appendChild(newGroup)
  
          this.__currentElement = newGroup
  
      }
  
      /**
       * Draws a canvas, image or mock context to this canvas.
       * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
       * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
       */
      ctx.prototype.drawImage = function () {
          //convert arguments to a real array
          var args = Array.prototype.slice.call(arguments),
              image = args[0],
              dx, dy, dw, dh, sx = 0, sy = 0, sw, sh, parent, svg, defs, group,
              currentElement, svgImage, canvas, context, id
  
          if (args.length === 3) {
              dx = args[1]
              dy = args[2]
              sw = image.width
              sh = image.height
              dw = sw
              dh = sh
          } else if (args.length === 5) {
              dx = args[1]
              dy = args[2]
              dw = args[3]
              dh = args[4]
              sw = image.width
              sh = image.height
          } else if (args.length === 9) {
              sx = args[1]
              sy = args[2]
              sw = args[3]
              sh = args[4]
              dx = args[5]
              dy = args[6]
              dw = args[7]
              dh = args[8]
          } else {
              throw new Error('Invalid number of arguments passed to drawImage: ' + arguments.length)
          }
  
          parent = this.__closestGroupOrSvg()
          currentElement = this.__currentElement
          var translateDirective = 'translate(' + dx + ', ' + dy + ')'
          if (image instanceof ctx) {
              //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
              //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
              svg = image.getSvg().cloneNode(true)
              if (svg.childNodes && svg.childNodes.length > 1) {
                  defs = svg.childNodes[0]
                  while (defs.childNodes.length) {
                      id = defs.childNodes[0].getAttribute('id')
                      this.__ids[id] = id
                      this.__defs.appendChild(defs.childNodes[0])
                  }
                  group = svg.childNodes[1]
                  if (group) {
                      //save original transform
                      var originTransform = group.getAttribute('transform')
                      var transformDirective
                      if (originTransform) {
                          transformDirective = originTransform + ' ' + translateDirective
                      } else {
                          transformDirective = translateDirective
                      }
                      group.setAttribute('transform', transformDirective)
                      parent.appendChild(group)
                  }
              }
          } else if (image.nodeName === 'CANVAS' || image.nodeName === 'IMG') {
              //canvas or image
              svgImage = this.__createElement('image')
              svgImage.setAttribute('width', dw)
              svgImage.setAttribute('height', dh)
              svgImage.setAttribute('preserveAspectRatio', 'none')
  
              if (sx || sy || sw !== image.width || sh !== image.height) {
                  //crop the image using a temporary canvas
                  canvas = this.__document.createElement('canvas')
                  canvas.width = dw
                  canvas.height = dh
                  context = canvas.getContext('2d')
                  context.drawImage(image, sx, sy, sw, sh, 0, 0, dw, dh)
                  image = canvas
              }
              svgImage.setAttribute('transform', translateDirective)
              var imgSrc = image.getAttribute('src')
              if (imgSrc[0] === '/') {
                  imgSrc = location.protocol + '//' + location.host + imgSrc
              }
              svgImage.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                  image.nodeName === 'CANVAS' ? image.toDataURL() : imgSrc)
              parent.appendChild(svgImage)
          }
      }
  
      /**
       * Generates a pattern tag
       */
      ctx.prototype.createPattern = function (image, repetition) {
          var pattern = this.__document.createElementNS('http://www.w3.org/2000/svg', 'pattern'),
              id = randomString(this.__ids),
              img
          pattern.setAttribute('id', id)
          pattern.setAttribute('width', image.width)
          pattern.setAttribute('height', image.height)
          if (image.nodeName === 'CANVAS' || image.nodeName === 'IMG') {
              img = this.__document.createElementNS('http://www.w3.org/2000/svg', 'image')
              img.setAttribute('width', image.width)
              img.setAttribute('height', image.height)
              img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
                  image.nodeName === 'CANVAS' ? image.toDataURL() : image.getAttribute('src'))
              pattern.appendChild(img)
              this.__defs.appendChild(pattern)
          } else if (image instanceof ctx) {
              pattern.appendChild(image.__root.childNodes[1])
              this.__defs.appendChild(pattern)
          }
          return new CanvasPattern(pattern, this)
      }
  
      ctx.prototype.setLineDash = function (dashArray) {
          if (dashArray && dashArray.length > 0) {
              this.lineDash = dashArray.join(',')
          } else {
              this.lineDash = null
          }
      }
  
      /*
       * Ellipse command
       * @param x
       * @param y
       * @param radiusX
       * @param radiusY
       * @param startAngle
       * @param endAngle
       * @counterClockwise
       */
      ctx.prototype.ellipse = function (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise) {
          //ellipse is the same svg command as arc, but with a radiusX and radiusY instead of just radius
          if (startAngle === endAngle) {
              return
          }
  
          if (this.__currentElement.nodeName !== 'path') {
              this.beginPath()
          }
  
          startAngle = startAngle % (2 * Math.PI)
          endAngle = endAngle % (2 * Math.PI)
          if (startAngle === endAngle) {
              endAngle = ((endAngle + (2 * Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2 * Math.PI)
          }
          var endX = x + Math.cos(-rotation) * radiusX * Math.cos(endAngle)
              + Math.sin(-rotation) * radiusY * Math.sin(endAngle),
              endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle)
                  + Math.cos(-rotation) * radiusY * Math.sin(endAngle),
              startX = x + Math.cos(-rotation) * radiusX * Math.cos(startAngle)
                  + Math.sin(-rotation) * radiusY * Math.sin(startAngle),
              startY = y - Math.sin(-rotation) * radiusX * Math.cos(startAngle)
                  + Math.cos(-rotation) * radiusY * Math.sin(startAngle),
              sweepFlag = counterClockwise ? 0 : 1,
              largeArcFlag = 0,
              diff = endAngle - startAngle
  
          if (diff < 0) {
              diff += 2 * Math.PI
          }
  
          if (counterClockwise) {
              largeArcFlag = diff > Math.PI ? 0 : 1
          } else {
              largeArcFlag = diff > Math.PI ? 1 : 0
          }
  
          this.lineTo(startX, startY)
          this.__addPathCommand(format('A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}',
              {
                  rx: radiusX,
                  ry: radiusY,
                  xAxisRotation: rotation * (180 / Math.PI),
                  largeArcFlag: largeArcFlag,
                  sweepFlag: sweepFlag,
                  endX: endX,
                  endY: endY
              }))
  
          this.__currentPosition = { x: endX, y: endY }
      }
  
      /**
       * Not yet implemented
       */
      ctx.prototype.drawFocusRing = function () {}
      ctx.prototype.createImageData = function () {}
      ctx.prototype.getImageData = function () {}
      ctx.prototype.putImageData = function () {}
      ctx.prototype.globalCompositeOperation = function () {}
      ctx.prototype.setTransform = function () {}
  
      //add options for alternative namespace
      if (typeof window === 'object') {
          window.C2S = ctx
      }
  
      // CommonJS/Browserify
      if (typeof module === 'object' && typeof module.exports === 'object') {
          module.exports = ctx
      }
  
  }())
  