text: /**
   * Copyright (c) 2006-2015, JGraph Ltd
   * Copyright (c) 2006-2015, Gaudenz Alder
   */
  /**
   * Class: mxXmlCanvas2D
   *
   * Base class for all canvases. The following methods make up the public
   * interface of the canvas 2D for all painting in mxGraph:
   * 
   * - <save>, <restore>
   * - <scale>, <translate>, <rotate>
   * - <setAlpha>, <setFillAlpha>, <setStrokeAlpha>, <setFillColor>, <setGradient>,
   *   <setStrokeColor>, <setStrokeWidth>, <setDashed>, <setDashPattern>, <setLineCap>, 
   *   <setLineJoin>, <setMiterLimit>
   * - <setFontColor>, <setFontBackgroundColor>, <setFontBorderColor>, <setFontSize>,
   *   <setFontFamily>, <setFontStyle>
   * - <setShadow>, <setShadowColor>, <setShadowAlpha>, <setShadowOffset>
   * - <rect>, <roundrect>, <ellipse>, <image>, <text>
   * - <begin>, <moveTo>, <lineTo>, <quadTo>, <curveTo>
   * - <stroke>, <fill>, <fillAndStroke>
   * 
   * <mxAbstractCanvas2D.arcTo> is an additional method for drawing paths. This is
   * a synthetic method, meaning that it is turned into a sequence of curves by
   * default. Subclassers may add native support for arcs.
   * 
   * Constructor: mxXmlCanvas2D
   *
   * Constructs a new abstract canvas.
   */
  function mxXmlCanvas2D(root)
  {
  	mxAbstractCanvas2D.call(this);
  
  	/**
  	 * Variable: root
  	 * 
  	 * Reference to the container for the SVG content.
  	 */
  	this.root = root;
  
  	// Writes default settings;
  	this.writeDefaults();
  };
  
  /**
   * Extends mxAbstractCanvas2D
   */
  mxUtils.extend(mxXmlCanvas2D, mxAbstractCanvas2D);
  
  /**
   * Variable: textEnabled
   * 
   * Specifies if text output should be enabled. Default is true.
   */
  mxXmlCanvas2D.prototype.textEnabled = true;
  
  /**
   * Variable: compressed
   * 
   * Specifies if the output should be compressed by removing redundant calls.
   * Default is true.
   */
  mxXmlCanvas2D.prototype.compressed = true;
  
  /**
   * Function: writeDefaults
   * 
   * Writes the rendering defaults to <root>:
   */
  mxXmlCanvas2D.prototype.writeDefaults = function()
  {
  	var elem;
  	
  	// Writes font defaults
  	elem = this.createElement('fontfamily');
  	elem.setAttribute('family', mxConstants.DEFAULT_FONTFAMILY);
  	this.root.appendChild(elem);
  	
  	elem = this.createElement('fontsize');
  	elem.setAttribute('size', mxConstants.DEFAULT_FONTSIZE);
  	this.root.appendChild(elem);
  	
  	// Writes shadow defaults
  	elem = this.createElement('shadowcolor');
  	elem.setAttribute('color', mxConstants.SHADOWCOLOR);
  	this.root.appendChild(elem);
  	
  	elem = this.createElement('shadowalpha');
  	elem.setAttribute('alpha', mxConstants.SHADOW_OPACITY);
  	this.root.appendChild(elem);
  	
  	elem = this.createElement('shadowoffset');
  	elem.setAttribute('dx', mxConstants.SHADOW_OFFSET_X);
  	elem.setAttribute('dy', mxConstants.SHADOW_OFFSET_Y);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: format
   * 
   * Returns a formatted number with 2 decimal places.
   */
  mxXmlCanvas2D.prototype.format = function(value)
  {
  	return parseFloat(parseFloat(value).toFixed(2));
  };
  
  /**
   * Function: createElement
   * 
   * Creates the given element using the owner document of <root>.
   */
  mxXmlCanvas2D.prototype.createElement = function(name)
  {
  	return this.root.ownerDocument.createElement(name);
  };
  
  /**
   * Function: save
   * 
   * Saves the drawing state.
   */
  mxXmlCanvas2D.prototype.save = function()
  {
  	if (this.compressed)
  	{
  		mxAbstractCanvas2D.prototype.save.apply(this, arguments);
  	}
  	
  	this.root.appendChild(this.createElement('save'));
  };
  
  /**
   * Function: restore
   * 
   * Restores the drawing state.
   */
  mxXmlCanvas2D.prototype.restore = function()
  {
  	if (this.compressed)
  	{
  		mxAbstractCanvas2D.prototype.restore.apply(this, arguments);
  	}
  	
  	this.root.appendChild(this.createElement('restore'));
  };
  
  /**
   * Function: scale
   * 
   * Scales the output.
   * 
   * Parameters:
   * 
   * scale - Number that represents the scale where 1 is equal to 100%.
   */
  mxXmlCanvas2D.prototype.scale = function(value)
  {
          var elem = this.createElement('scale');
          elem.setAttribute('scale', value);
          this.root.appendChild(elem);
  };
  
  /**
   * Function: translate
   * 
   * Translates the output.
   * 
   * Parameters:
   * 
   * dx - Number that specifies the horizontal translation.
   * dy - Number that specifies the vertical translation.
   */
  mxXmlCanvas2D.prototype.translate = function(dx, dy)
  {
  	var elem = this.createElement('translate');
  	elem.setAttribute('dx', this.format(dx));
  	elem.setAttribute('dy', this.format(dy));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: rotate
   * 
   * Rotates and/or flips the output around a given center. (Note: Due to
   * limitations in VML, the rotation cannot be concatenated.)
   * 
   * Parameters:
   * 
   * theta - Number that represents the angle of the rotation (in degrees).
   * flipH - Boolean indicating if the output should be flipped horizontally.
   * flipV - Boolean indicating if the output should be flipped vertically.
   * cx - Number that represents the x-coordinate of the rotation center.
   * cy - Number that represents the y-coordinate of the rotation center.
   */
  mxXmlCanvas2D.prototype.rotate = function(theta, flipH, flipV, cx, cy)
  {
  	var elem = this.createElement('rotate');
  	
  	if (theta != 0 || flipH || flipV)
  	{
  		elem.setAttribute('theta', this.format(theta));
  		elem.setAttribute('flipH', (flipH) ? '1' : '0');
  		elem.setAttribute('flipV', (flipV) ? '1' : '0');
  		elem.setAttribute('cx', this.format(cx));
  		elem.setAttribute('cy', this.format(cy));
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setAlpha
   * 
   * Sets the current alpha.
   * 
   * Parameters:
   * 
   * value - Number that represents the new alpha. Possible values are between
   * 1 (opaque) and 0 (transparent).
   */
  mxXmlCanvas2D.prototype.setAlpha = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.alpha == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setAlpha.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('alpha');
  	elem.setAttribute('alpha', this.format(value));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setFillAlpha
   * 
   * Sets the current fill alpha.
   * 
   * Parameters:
   * 
   * value - Number that represents the new fill alpha. Possible values are between
   * 1 (opaque) and 0 (transparent).
   */
  mxXmlCanvas2D.prototype.setFillAlpha = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.fillAlpha == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setFillAlpha.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('fillalpha');
  	elem.setAttribute('alpha', this.format(value));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setStrokeAlpha
   * 
   * Sets the current stroke alpha.
   * 
   * Parameters:
   * 
   * value - Number that represents the new stroke alpha. Possible values are between
   * 1 (opaque) and 0 (transparent).
   */
  mxXmlCanvas2D.prototype.setStrokeAlpha = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.strokeAlpha == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setStrokeAlpha.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('strokealpha');
  	elem.setAttribute('alpha', this.format(value));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setFillColor
   * 
   * Sets the current fill color.
   * 
   * Parameters:
   * 
   * value - Hexadecimal representation of the color or 'none'.
   */
  mxXmlCanvas2D.prototype.setFillColor = function(value)
  {
  	if (value == mxConstants.NONE)
  	{
  		value = null;
  	}
  	
  	if (this.compressed)
  	{
  		if (this.state.fillColor == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setFillColor.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('fillcolor');
  	elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setGradient
   * 
   * Sets the gradient. Note that the coordinates may be ignored by some implementations.
   * 
   * Parameters:
   * 
   * color1 - Hexadecimal representation of the start color.
   * color2 - Hexadecimal representation of the end color.
   * x - X-coordinate of the gradient region.
   * y - y-coordinate of the gradient region.
   * w - Width of the gradient region.
   * h - Height of the gradient region.
   * direction - One of <mxConstants.DIRECTION_NORTH>, <mxConstants.DIRECTION_EAST>,
   * <mxConstants.DIRECTION_SOUTH> or <mxConstants.DIRECTION_WEST>.
   * alpha1 - Optional alpha of the start color. Default is 1. Possible values
   * are between 1 (opaque) and 0 (transparent).
   * alpha2 - Optional alpha of the end color. Default is 1. Possible values
   * are between 1 (opaque) and 0 (transparent).
   */
  mxXmlCanvas2D.prototype.setGradient = function(color1, color2, x, y, w, h, direction, alpha1, alpha2)
  {
  	if (color1 != null && color2 != null)
  	{
  		mxAbstractCanvas2D.prototype.setGradient.apply(this, arguments);
  		
  		var elem = this.createElement('gradient');
  		elem.setAttribute('c1', color1);
  		elem.setAttribute('c2', color2);
  		elem.setAttribute('x', this.format(x));
  		elem.setAttribute('y', this.format(y));
  		elem.setAttribute('w', this.format(w));
  		elem.setAttribute('h', this.format(h));
  		
  		// Default direction is south
  		if (direction != null)
  		{
  			elem.setAttribute('direction', direction);
  		}
  		
  		if (alpha1 != null)
  		{
  			elem.setAttribute('alpha1', alpha1);
  		}
  		
  		if (alpha2 != null)
  		{
  			elem.setAttribute('alpha2', alpha2);
  		}
  		
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setStrokeColor
   * 
   * Sets the current stroke color.
   * 
   * Parameters:
   * 
   * value - Hexadecimal representation of the color or 'none'.
   */
  mxXmlCanvas2D.prototype.setStrokeColor = function(value)
  {
  	if (value == mxConstants.NONE)
  	{
  		value = null;
  	}
  	
  	if (this.compressed)
  	{
  		if (this.state.strokeColor == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setStrokeColor.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('strokecolor');
  	elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setStrokeWidth
   * 
   * Sets the current stroke width.
   * 
   * Parameters:
   * 
   * value - Numeric representation of the stroke width.
   */
  mxXmlCanvas2D.prototype.setStrokeWidth = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.strokeWidth == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setStrokeWidth.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('strokewidth');
  	elem.setAttribute('width', this.format(value));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setDashed
   * 
   * Enables or disables dashed lines.
   * 
   * Parameters:
   * 
   * value - Boolean that specifies if dashed lines should be enabled.
   */
  mxXmlCanvas2D.prototype.setDashed = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.dashed == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setDashed.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('dashed');
  	elem.setAttribute('dashed', (value) ? '1' : '0');
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setDashPattern
   * 
   * Sets the current dash pattern. Default is '3 3'.
   * 
   * Parameters:
   * 
   * value - String that represents the dash pattern, which is a sequence of
   * numbers defining the length of the dashes and the length of the spaces
   * between the dashes. The lengths are relative to the line width - a length
   * of 1 is equals to the line width.
   */
  mxXmlCanvas2D.prototype.setDashPattern = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.dashPattern == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setDashPattern.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('dashpattern');
  	elem.setAttribute('pattern', value);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setLineCap
   * 
   * Sets the line cap. Default is 'flat' which corresponds to 'butt' in SVG.
   * 
   * Parameters:
   * 
   * value - String that represents the line cap. Possible values are flat, round
   * and square.
   */
  mxXmlCanvas2D.prototype.setLineCap = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.lineCap == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setLineCap.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('linecap');
  	elem.setAttribute('cap', value);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setLineJoin
   * 
   * Sets the line join. Default is 'miter'.
   * 
   * Parameters:
   * 
   * value - String that represents the line join. Possible values are miter,
   * round and bevel.
   */
  mxXmlCanvas2D.prototype.setLineJoin = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.lineJoin == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setLineJoin.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('linejoin');
  	elem.setAttribute('join', value);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setMiterLimit
   * 
   * Sets the miter limit. Default is 10.
   * 
   * Parameters:
   * 
   * value - Number that represents the miter limit.
   */
  mxXmlCanvas2D.prototype.setMiterLimit = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.miterLimit == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setMiterLimit.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('miterlimit');
  	elem.setAttribute('limit', value);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setFontColor
   * 
   * Sets the current font color. Default is '#000000'.
   * 
   * Parameters:
   * 
   * value - Hexadecimal representation of the color or 'none'.
   */
  mxXmlCanvas2D.prototype.setFontColor = function(value)
  {
  	if (this.textEnabled)
  	{
  		if (value == mxConstants.NONE)
  		{
  			value = null;
  		}
  		
  		if (this.compressed)
  		{
  			if (this.state.fontColor == value)
  			{
  				return;
  			}
  			
  			mxAbstractCanvas2D.prototype.setFontColor.apply(this, arguments);
  		}
  		
  		var elem = this.createElement('fontcolor');
  		elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setFontBackgroundColor
   * 
   * Sets the current font background color.
   * 
   * Parameters:
   * 
   * value - Hexadecimal representation of the color or 'none'.
   */
  mxXmlCanvas2D.prototype.setFontBackgroundColor = function(value)
  {
  	if (this.textEnabled)
  	{
  		if (value == mxConstants.NONE)
  		{
  			value = null;
  		}
  		
  		if (this.compressed)
  		{
  			if (this.state.fontBackgroundColor == value)
  			{
  				return;
  			}
  			
  			mxAbstractCanvas2D.prototype.setFontBackgroundColor.apply(this, arguments);
  		}
  
  		var elem = this.createElement('fontbackgroundcolor');
  		elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setFontBorderColor
   * 
   * Sets the current font border color.
   * 
   * Parameters:
   * 
   * value - Hexadecimal representation of the color or 'none'.
   */
  mxXmlCanvas2D.prototype.setFontBorderColor = function(value)
  {
  	if (this.textEnabled)
  	{
  		if (value == mxConstants.NONE)
  		{
  			value = null;
  		}
  		
  		if (this.compressed)
  		{
  			if (this.state.fontBorderColor == value)
  			{
  				return;
  			}
  			
  			mxAbstractCanvas2D.prototype.setFontBorderColor.apply(this, arguments);
  		}
  		
  		var elem = this.createElement('fontbordercolor');
  		elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setFontSize
   * 
   * Sets the current font size. Default is <mxConstants.DEFAULT_FONTSIZE>.
   * 
   * Parameters:
   * 
   * value - Numeric representation of the font size.
   */
  mxXmlCanvas2D.prototype.setFontSize = function(value)
  {
  	if (this.textEnabled)
  	{
  		if (this.compressed)
  		{
  			if (this.state.fontSize == value)
  			{
  				return;
  			}
  			
  			mxAbstractCanvas2D.prototype.setFontSize.apply(this, arguments);
  		}
  		
  		var elem = this.createElement('fontsize');
  		elem.setAttribute('size', value);
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setFontFamily
   * 
   * Sets the current font family. Default is <mxConstants.DEFAULT_FONTFAMILY>.
   * 
   * Parameters:
   * 
   * value - String representation of the font family. This handles the same
   * values as the CSS font-family property.
   */
  mxXmlCanvas2D.prototype.setFontFamily = function(value)
  {
  	if (this.textEnabled)
  	{
  		if (this.compressed)
  		{
  			if (this.state.fontFamily == value)
  			{
  				return;
  			}
  			
  			mxAbstractCanvas2D.prototype.setFontFamily.apply(this, arguments);
  		}
  		
  		var elem = this.createElement('fontfamily');
  		elem.setAttribute('family', value);
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setFontStyle
   * 
   * Sets the current font style.
   * 
   * Parameters:
   * 
   * value - Numeric representation of the font family. This is the sum of the
   * font styles from <mxConstants>.
   */
  mxXmlCanvas2D.prototype.setFontStyle = function(value)
  {
  	if (this.textEnabled)
  	{
  		if (value == null)
  		{
  			value = 0;
  		}
  		
  		if (this.compressed)
  		{
  			if (this.state.fontStyle == value)
  			{
  				return;
  			}
  			
  			mxAbstractCanvas2D.prototype.setFontStyle.apply(this, arguments);
  		}
  		
  		var elem = this.createElement('fontstyle');
  		elem.setAttribute('style', value);
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: setShadow
   * 
   * Enables or disables shadows.
   * 
   * Parameters:
   * 
   * value - Boolean that specifies if shadows should be enabled.
   */
  mxXmlCanvas2D.prototype.setShadow = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.shadow == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setShadow.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('shadow');
  	elem.setAttribute('enabled', (value) ? '1' : '0');
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setShadowColor
   * 
   * Sets the current shadow color. Default is <mxConstants.SHADOWCOLOR>.
   * 
   * Parameters:
   * 
   * value - Hexadecimal representation of the color or 'none'.
   */
  mxXmlCanvas2D.prototype.setShadowColor = function(value)
  {
  	if (this.compressed)
  	{
  		if (value == mxConstants.NONE)
  		{
  			value = null;
  		}
  		
  		if (this.state.shadowColor == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setShadowColor.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('shadowcolor');
  	elem.setAttribute('color', (value != null) ? value : mxConstants.NONE);
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: setShadowAlpha
   * 
   * Sets the current shadows alpha. Default is <mxConstants.SHADOW_OPACITY>.
   * 
   * Parameters:
   * 
   * value - Number that represents the new alpha. Possible values are between
   * 1 (opaque) and 0 (transparent).
   */
  mxXmlCanvas2D.prototype.setShadowAlpha = function(value)
  {
  	if (this.compressed)
  	{
  		if (this.state.shadowAlpha == value)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setShadowAlpha.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('shadowalpha');
  	elem.setAttribute('alpha', value);
  	this.root.appendChild(elem);
  	
  };
  
  /**
   * Function: setShadowOffset
   * 
   * Sets the current shadow offset.
   * 
   * Parameters:
   * 
   * dx - Number that represents the horizontal offset of the shadow.
   * dy - Number that represents the vertical offset of the shadow.
   */
  mxXmlCanvas2D.prototype.setShadowOffset = function(dx, dy)
  {
  	if (this.compressed)
  	{
  		if (this.state.shadowDx == dx && this.state.shadowDy == dy)
  		{
  			return;
  		}
  		
  		mxAbstractCanvas2D.prototype.setShadowOffset.apply(this, arguments);
  	}
  	
  	var elem = this.createElement('shadowoffset');
  	elem.setAttribute('dx', dx);
  	elem.setAttribute('dy', dy);
  	this.root.appendChild(elem);
  	
  };
  
  /**
   * Function: rect
   * 
   * Puts a rectangle into the drawing buffer.
   * 
   * Parameters:
   * 
   * x - Number that represents the x-coordinate of the rectangle.
   * y - Number that represents the y-coordinate of the rectangle.
   * w - Number that represents the width of the rectangle.
   * h - Number that represents the height of the rectangle.
   */
  mxXmlCanvas2D.prototype.rect = function(x, y, w, h)
  {
  	var elem = this.createElement('rect');
  	elem.setAttribute('x', this.format(x));
  	elem.setAttribute('y', this.format(y));
  	elem.setAttribute('w', this.format(w));
  	elem.setAttribute('h', this.format(h));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: roundrect
   * 
   * Puts a rounded rectangle into the drawing buffer.
   * 
   * Parameters:
   * 
   * x - Number that represents the x-coordinate of the rectangle.
   * y - Number that represents the y-coordinate of the rectangle.
   * w - Number that represents the width of the rectangle.
   * h - Number that represents the height of the rectangle.
   * dx - Number that represents the horizontal rounding.
   * dy - Number that represents the vertical rounding.
   */
  mxXmlCanvas2D.prototype.roundrect = function(x, y, w, h, dx, dy)
  {
  	var elem = this.createElement('roundrect');
  	elem.setAttribute('x', this.format(x));
  	elem.setAttribute('y', this.format(y));
  	elem.setAttribute('w', this.format(w));
  	elem.setAttribute('h', this.format(h));
  	elem.setAttribute('dx', this.format(dx));
  	elem.setAttribute('dy', this.format(dy));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: ellipse
   * 
   * Puts an ellipse into the drawing buffer.
   * 
   * Parameters:
   * 
   * x - Number that represents the x-coordinate of the ellipse.
   * y - Number that represents the y-coordinate of the ellipse.
   * w - Number that represents the width of the ellipse.
   * h - Number that represents the height of the ellipse.
   */
  mxXmlCanvas2D.prototype.ellipse = function(x, y, w, h)
  {
  	var elem = this.createElement('ellipse');
  	elem.setAttribute('x', this.format(x));
  	elem.setAttribute('y', this.format(y));
  	elem.setAttribute('w', this.format(w));
  	elem.setAttribute('h', this.format(h));
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: image
   * 
   * Paints an image.
   * 
   * Parameters:
   * 
   * x - Number that represents the x-coordinate of the image.
   * y - Number that represents the y-coordinate of the image.
   * w - Number that represents the width of the image.
   * h - Number that represents the height of the image.
   * src - String that specifies the URL of the image.
   * aspect - Boolean indicating if the aspect of the image should be preserved.
   * flipH - Boolean indicating if the image should be flipped horizontally.
   * flipV - Boolean indicating if the image should be flipped vertically.
   */
  mxXmlCanvas2D.prototype.image = function(x, y, w, h, src, aspect, flipH, flipV)
  {
  	src = this.converter.convert(src);
  	
  	// LATER: Add option for embedding images as base64.
  	var elem = this.createElement('image');
  	elem.setAttribute('x', this.format(x));
  	elem.setAttribute('y', this.format(y));
  	elem.setAttribute('w', this.format(w));
  	elem.setAttribute('h', this.format(h));
  	elem.setAttribute('src', src);
  	elem.setAttribute('aspect', (aspect) ? '1' : '0');
  	elem.setAttribute('flipH', (flipH) ? '1' : '0');
  	elem.setAttribute('flipV', (flipV) ? '1' : '0');
  	this.root.appendChild(elem);
  };
  
  /**
   * Function: begin
   * 
   * Starts a new path and puts it into the drawing buffer.
   */
  mxXmlCanvas2D.prototype.begin = function()
  {
  	this.root.appendChild(this.createElement('begin'));
  	this.lastX = 0;
  	this.lastY = 0;
  };
  
  /**
   * Function: moveTo
   * 
   * Moves the current path the given point.
   * 
   * Parameters:
   * 
   * x - Number that represents the x-coordinate of the point.
   * y - Number that represents the y-coordinate of the point.
   */
  mxXmlCanvas2D.prototype.moveTo = function(x, y)
  {
  	var elem = this.createElement('move');
  	elem.setAttribute('x', this.format(x));
  	elem.setAttribute('y', this.format(y));
  	this.root.appendChild(elem);
  	this.lastX = x;
  	this.lastY = y;
  };
  
  /**
   * Function: lineTo
   * 
   * Draws a line to the given coordinates.
   * 
   * Parameters:
   * 
   * x - Number that represents the x-coordinate of the endpoint.
   * y - Number that represents the y-coordinate of the endpoint.
   */
  mxXmlCanvas2D.prototype.lineTo = function(x, y)
  {
  	var elem = this.createElement('line');
  	elem.setAttribute('x', this.format(x));
  	elem.setAttribute('y', this.format(y));
  	this.root.appendChild(elem);
  	this.lastX = x;
  	this.lastY = y;
  };
  
  /**
   * Function: quadTo
   * 
   * Adds a quadratic curve to the current path.
   * 
   * Parameters:
   * 
   * x1 - Number that represents the x-coordinate of the control point.
   * y1 - Number that represents the y-coordinate of the control point.
   * x2 - Number that represents the x-coordinate of the endpoint.
   * y2 - Number that represents the y-coordinate of the endpoint.
   */
  mxXmlCanvas2D.prototype.quadTo = function(x1, y1, x2, y2)
  {
  	var elem = this.createElement('quad');
  	elem.setAttribute('x1', this.format(x1));
  	elem.setAttribute('y1', this.format(y1));
  	elem.setAttribute('x2', this.format(x2));
  	elem.setAttribute('y2', this.format(y2));
  	this.root.appendChild(elem);
  	this.lastX = x2;
  	this.lastY = y2;
  };
  
  /**
   * Function: curveTo
   * 
   * Adds a bezier curve to the current path.
   * 
   * Parameters:
   * 
   * x1 - Number that represents the x-coordinate of the first control point.
   * y1 - Number that represents the y-coordinate of the first control point.
   * x2 - Number that represents the x-coordinate of the second control point.
   * y2 - Number that represents the y-coordinate of the second control point.
   * x3 - Number that represents the x-coordinate of the endpoint.
   * y3 - Number that represents the y-coordinate of the endpoint.
   */
  mxXmlCanvas2D.prototype.curveTo = function(x1, y1, x2, y2, x3, y3)
  {
  	var elem = this.createElement('curve');
  	elem.setAttribute('x1', this.format(x1));
  	elem.setAttribute('y1', this.format(y1));
  	elem.setAttribute('x2', this.format(x2));
  	elem.setAttribute('y2', this.format(y2));
  	elem.setAttribute('x3', this.format(x3));
  	elem.setAttribute('y3', this.format(y3));
  	this.root.appendChild(elem);
  	this.lastX = x3;
  	this.lastY = y3;
  };
  
  /**
   * Function: close
   * 
   * Closes the current path.
   */
  mxXmlCanvas2D.prototype.close = function()
  {
  	this.root.appendChild(this.createElement('close'));
  };
  
  /**
   * Function: text
   * 
   * Paints the given text. Possible values for format are empty string for
   * plain text and html for HTML markup. Background and border color as well
   * as clipping is not available in plain text labels for VML. HTML labels
   * are not available as part of shapes with no foreignObject support in SVG
   * (eg. IE9, IE10).
   * 
   * Parameters:
   * 
   * x - Number that represents the x-coordinate of the text.
   * y - Number that represents the y-coordinate of the text.
   * w - Number that represents the available width for the text or 0 for automatic width.
   * h - Number that represents the available height for the text or 0 for automatic height.
   * str - String that specifies the text to be painted.
   * align - String that represents the horizontal alignment.
   * valign - String that represents the vertical alignment.
   * wrap - Boolean that specifies if word-wrapping is enabled. Requires w > 0.
   * format - Empty string for plain text or 'html' for HTML markup.
   * overflow - Specifies the overflow behaviour of the label. Requires w > 0 and/or h > 0.
   * clip - Boolean that specifies if the label should be clipped. Requires w > 0 and/or h > 0.
   * rotation - Number that specifies the angle of the rotation around the anchor point of the text.
   * dir - Optional string that specifies the text direction. Possible values are rtl and lrt.
   */
  mxXmlCanvas2D.prototype.text = function(x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir)
  {
  	if (this.textEnabled && str != null)
  	{
  		if (mxUtils.isNode(str))
  		{
  			str = mxUtils.getOuterHtml(str);
  		}
  		
  		var elem = this.createElement('text');
  		elem.setAttribute('x', this.format(x));
  		elem.setAttribute('y', this.format(y));
  		elem.setAttribute('w', this.format(w));
  		elem.setAttribute('h', this.format(h));
  		elem.setAttribute('str', str);
  		
  		if (align != null)
  		{
  			elem.setAttribute('align', align);
  		}
  		
  		if (valign != null)
  		{
  			elem.setAttribute('valign', valign);
  		}
  		
  		elem.setAttribute('wrap', (wrap) ? '1' : '0');
  		
  		if (format == null)
  		{
  			format = '';
  		}
  		
  		elem.setAttribute('format', format);
  		
  		if (overflow != null)
  		{
  			elem.setAttribute('overflow', overflow);
  		}
  		
  		if (clip != null)
  		{
  			elem.setAttribute('clip', (clip) ? '1' : '0');
  		}
  		
  		if (rotation != null)
  		{
  			elem.setAttribute('rotation', rotation);
  		}
  		
  		if (dir != null)
  		{
  			elem.setAttribute('dir', dir);
  		}
  		
  		this.root.appendChild(elem);
  	}
  };
  
  /**
   * Function: stroke
   * 
   * Paints the outline of the current drawing buffer.
   */
  mxXmlCanvas2D.prototype.stroke = function()
  {
  	this.root.appendChild(this.createElement('stroke'));
  };
  
  /**
   * Function: fill
   * 
   * Fills the current drawing buffer.
   */
  mxXmlCanvas2D.prototype.fill = function()
  {
  	this.root.appendChild(this.createElement('fill'));
  };
  
  /**
   * Function: fillAndStroke
   * 
   * Fills the current drawing buffer and its outline.
   */
  mxXmlCanvas2D.prototype.fillAndStroke = function()
  {
  	this.root.appendChild(this.createElement('fillstroke'));
  };
  
  exports.mxXmlCanvas2D = mxXmlCanvas2D;