Add excanvas javascript (emulates <canvas> in IE using silverlight)

static/scripts/excanvas.js

@@ -0,0 +1,770 @@
+// Copyright 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// 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 "AS IS" 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: (From VML version)
+//
+// * Patterns are not implemented.
+// * 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't correct.
+// * Painting mode isn'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)
+// * Optimize. There is always room for speed improvements.
+
+//Known Issues: Silverlight version
+//
+// * Doing a transformation during a path (ie lineTo, transform, lineTo) will
+//   not work corerctly because the transform is done to the whole path (ie
+//   transform, lineTo, lineTo)
+// * Patterns are not yet implemented.
+
+
+// only add this code if we do not already have a canvas implementation
+if (!window.CanvasRenderingContext2D) {
+
+(function () {
+
+  var xamlId;
+
+  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('canvas');
+      if (/MSIE/.test(navigator.userAgent) && !window.opera) {
+        var self = this;
+
+        createXamlScriptTag();
+
+        doc.attachEvent('onreadystatechange', function () {
+          self.init_(doc);
+        });
+      }
+    },
+
+    init_: function (doc) {
+      // setup default css
+      var ss = doc.createStyleSheet();
+      ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
+          // default size is 300x150 in Gecko and Opera
+          'text-align:left;width:300px;height:150px}' +
+          'canvas object{width:100%;height:100%;border:0;' +
+          'background:transparen;margin:0}';
+
+      // find all canvas elements
+      var els = doc.getElementsByTagName('canvas');
+      for (var i = 0; i < els.length; i++) {
+        if (!els[i].getContext) {
+          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) {
+      el.getContext = function () {
+        if (this.context_) {
+          return this.context_;
+        }
+        return this.context_ = new CanvasRenderingContext2D_(this);
+      };
+
+      var attrs = el.attributes;
+      if (attrs.width && attrs.width.specified) {
+        // TODO: use runtimeStyle and coordsize
+        // el.getContext().setWidth_(attrs.width.nodeValue);
+        el.style.width = attrs.width.nodeValue + 'px';
+      } else {
+        el.width = el.clientWidth;
+      }
+      if (attrs.height && attrs.height.specified) {
+        // TODO: use runtimeStyle and coordsize
+        // el.getContext().setHeight_(attrs.height.nodeValue);
+        el.style.height = attrs.height.nodeValue + 'px';
+      } else {
+        el.height = el.clientHeight;
+      }
+
+      // insert object tag
+      el.innerHTML = getObjectHtml();
+
+      // do not use inline function because that will leak memory
+      el.attachEvent('onpropertychange', onPropertyChange);
+      return el;
+    }
+  };
+
+  function onPropertyChange(e) {
+    var el = e.srcElement;
+
+    switch (e.propertyName) {
+      case 'width':
+        el.style.width = el.attributes.width.nodeValue + 'px';
+        el.getContext().clearRect();
+        break;
+      case 'height':
+        el.style.height = el.attributes.height.nodeValue + 'px';
+        el.getContext().clearRect();
+        break;
+    }
+  }
+
+  G_vmlCanvasManager_.init();
+
+  function createXamlScriptTag() {
+    // This script tag contains the boilerplate XAML.
+    document.write('<script type=text/xaml>' +
+        '<Canvas x:Name="root" ' +
+        'xmlns="http://schemas.microsoft.com/client/2007" ' +
+        'xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ' +
+        'Width="300" ' +
+        'Height="150" ' +
+        'Background="Transparent"> ' +
+        '</Canvas>' +
+        '</script>');
+    // Find the id of the writtenscript file.
+    var scripts = document.scripts;
+    var script = scripts[scripts.length - 1];
+    xamlId = script.uniqueID;
+    script.id = xamlId;
+  }
+
+  function getObjectHtml(fn) {
+    return '<object type="application/x-silverlight" >' +
+        '<param name="windowless" value="true">' +
+        '<param name="background" value="transparent">' +
+        '<param name="source" value="#' + xamlId + '">' +
+        '</object>';
+  }
+
+  function hasSilverlight() {
+    try {
+      new ActiveXObject('AgControl.AgControl');
+      return true;
+    } catch(_) {
+      return false;
+    }
+  }
+
+  // precompute "00" to "FF"
+  var dec2hex = [];
+  for (var i = 0; i < 16; i++) {
+    for (var j = 0; j < 16; j++) {
+      dec2hex[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 < 3; x++) {
+      for (var y = 0; y < 3; y++) {
+        var sum = 0;
+
+        for (var z = 0; z < 3; z++) {
+          sum += m1[x][z] * m2[z][y];
+        }
+
+        result[x][y] = sum;
+      }
+    }
+    return result;
+  }
+
+  function doTransform(ctx) {
+    transformObject(ctx, getRoot(ctx), ctx.m_);
+  }
+
+  function transformObject(ctx, obj, m) {
+    var transform = obj.renderTransform;
+    var matrix;
+    if (!transform) {
+      transform = create(ctx, '<MatrixTransform/>');
+      matrix = create(ctx, '<Matrix/>');
+      transform.matrix = matrix;
+      obj.renderTransform = transform;
+    } else {
+      matrix = transform.matrix;
+    }
+
+    matrix.m11 = m[0][0];
+    matrix.m12 = m[0][1];
+    matrix.m21 = m[1][0];
+    matrix.m22 = m[1][1];
+    matrix.offsetX = m[2][0];
+    matrix.offsetY = m[2][1];
+  }
+
+  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.arcScaleX_    = o1.arcScaleX_;
+    o2.arcScaleY_    = o1.arcScaleY_;
+  }
+
+  function translateColor(s) {
+    var rgbaMatch = /rgba\(([^)]+)\)/gi.exec(s);
+    if (rgbaMatch) {
+      var parts = rgbaMatch[1].split(',');
+      return '#' + dec2hex[Math.floor(Number(parts[3]) * 255)] +
+          dec2hex[Number(parts[0])] +
+          dec2hex[Number(parts[1])] +
+          dec2hex[Number(parts[2])];
+    }
+
+    var rgbMatch  = /rgb\(([^)]+)\)/gi.exec(s);
+    if (rgbMatch) {
+      var parts = rgbMatch[1].split(',');
+      return '#FF' + dec2hex[Number(parts[0])] +
+          dec2hex[Number(parts[1])] +
+          dec2hex[Number(parts[2])];
+    }
+
+    return s;
+  }
+
+  function processLineCap(lineCap) {
+    switch (lineCap) {
+      case 'butt':
+        return 'flat';
+      case 'round':
+        return 'round';
+      case 'square':
+      default:
+        return 'square';
+    }
+  }
+
+  function getRoot(ctx) {
+    return ctx.canvas.firstChild.content.findName('root');
+  }
+
+  function create(ctx, s, opt_args) {
+    if (opt_args) {
+      s = s.replace(/\%(\d+)/g, function(match, index) {
+        return opt_args[Number(index) - 1];
+      });
+    }
+
+    try {
+      return ctx.canvas.firstChild.content.createFromXaml(s);
+    } catch (ex) {
+      throw Error('Could not create XAML from: ' + s);
+    }
+  }
+
+  function drawShape(ctx, s, opt_args) {
+    var canvas = ctx.lastCanvas_ || create(ctx, '<Canvas/>');
+    var shape = create(ctx, s, opt_args);
+    canvas.children.add(shape);
+    transformObject(ctx, canvas, ctx.m_);
+    if (!ctx.lastCanvas_) {
+      getRoot(ctx).children.add(canvas);
+      ctx.lastCanvas_ = canvas;
+    }
+    return shape;
+  }
+
+  function createBrushObject(ctx, value) {
+    if (value instanceof CanvasGradient_) {
+      return value.createBrush_(ctx);
+    } else if (value instanceof CanvasPattern_) {
+      throw Error('Not implemented');
+    } else {
+      return create(ctx, '<SolidColorBrush Color="%1"/>',
+                    [translateColor(value)]);
+    }
+  }
+
+  /**
+   * This class implements CanvasRenderingContext2D interface as described by
+   * the WHATWG.
+   * @param {HTMLElement} surfaceElement The element that the 2D context should
+   *     be associated with
+   */
+   function CanvasRenderingContext2D_(surfaceElement) {
+    this.m_ = createMatrixIdentity();
+    this.lastCanvas_ = null;
+
+    this.mStack_ = [];
+    this.aStack_ = [];
+    this.currentPath_ = [];
+
+    // Canvas context properties
+    this.strokeStyle = '#000';
+    this.fillStyle = '#000';
+
+    this.lineWidth = 1;
+    this.lineJoin = 'miter';
+    this.lineCap = 'butt';
+    this.miterLimit = 10;
+    this.globalAlpha = 1;
+    this.canvas = surfaceElement;
+  };
+
+
+  var contextPrototype = CanvasRenderingContext2D_.prototype;
+
+  contextPrototype.clearRect = function() {
+    var root = getRoot(this);
+    root.children.clear();
+
+    // TODO: Implement
+    this.currentPath_ = [];
+    this.lastCanvas_ = null;
+
+  };
+
+  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) {
+    this.currentPath_.push('M' + aX + ',' + aY);
+  };
+
+  contextPrototype.lineTo = function(aX, aY) {
+    if (this.currentPath_.length == 0) return;
+    this.currentPath_.push('L' + aX + ',' + aY);
+  };
+
+  contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
+                                            aCP2x, aCP2y,
+                                            aX, aY) {
+    if (this.currentPath_.length == 0) return;
+    this.currentPath_.push('C' + aCP1x + ',' + aCP1y + ' ' +
+                           aCP2x + ',' + aCP2y + ' ' +
+                           aX + ' ' + aY);
+  };
+
+  contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
+    if (this.currentPath_.length == 0) return;
+    this.currentPath_.push('Q' + aCPx + ',' + aCPy + ' ' +
+                           aX + ',' + aY);
+  };
+
+  contextPrototype.arcTo = function(x1, y1, x2, y2, radius) {
+    if (this.currentPath_.length == 0) return;
+    // TODO: Implement
+  };
+
+  contextPrototype.arc = function(aX, aY, aRadius,
+                                  aStartAngle, aEndAngle, aClockwise) {
+    var deltaAngle = Math.abs(aStartAngle - aEndAngle);
+    // If start and stop are the same WebKit and Moz does nothing
+    if (aStartAngle == aEndAngle) {
+      // different browsers behave differently here so we do the easiest thing
+      return;
+    }
+
+    var endX = aX + aRadius * Math.cos(aEndAngle);
+    var endY = aY + aRadius * Math.sin(aEndAngle);
+
+    if (deltaAngle >= 2 * Math.PI) {
+      // if larger than 2PI
+      this.arc(aX, aY, aRadius, aStartAngle, aStartAngle + Math.PI, aClockwise);
+      this.arc(aX, aY, aRadius, aStartAngle + Math.PI,
+               aStartAngle + 2 * Math.PI, aClockwise);
+      // now move to end point
+      this.moveTo(endX, endY);
+      return;
+    }
+
+    var startX = aX + aRadius * Math.cos(aStartAngle);
+    var startY = aY + aRadius * Math.sin(aStartAngle);
+    var rotationAngle = deltaAngle * 180 / Math.PI; // sign, abs?
+    var sweepDirection = aClockwise ? 0 : 1;
+    var isLargeArc = rotationAngle >= 180 == Boolean(aClockwise) ? 0 : 1;
+
+    if (this.currentPath_.length != 0) {
+      // add line to start point
+      this.lineTo(startX, startY);
+    } else {
+      this.moveTo(startX, startY);
+    }
+
+    this.currentPath_.push('A' + aRadius + ',' + aRadius + ' ' +
+                           rotationAngle + ' ' +
+                           isLargeArc + ' ' +
+                           sweepDirection + ' ' +
+                           endX + ',' + endY);
+  };
+
+  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) {
+    // Will destroy any existing path (same as FF behaviour)
+    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_ = [];
+  };
+
+  contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
+    // Will destroy any existing path (same as FF behaviour)
+    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_ = [];
+  };
+
+  contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
+    return new LinearCanvasGradient_(aX0, aY0, aX1, aY1);
+  };
+
+  contextPrototype.createRadialGradient = function(x0, y0,
+                                                   r0, x1,
+                                                   y1, r1) {
+    return new RadialCanvasGradient_(x0, y0, r0, x1, y1, r1);
+  };
+
+  contextPrototype.drawImage = function (image, var_args) {
+    var dx, dy, dw, dh, sx, sy, sw, sh;
+
+    // For Silverlight we don't need to get the size of the image since
+    // Silverlight uses the image original dimension if not provided.
+
+    if (arguments.length == 3) {
+      dx = arguments[1];
+      dy = arguments[2];
+      // Keep sx, sy, sw, dw, sh and dh undefined
+    } else if (arguments.length == 5) {
+      dx = arguments[1];
+      dy = arguments[2];
+      dw = arguments[3];
+      dh = arguments[4];
+      // Keep sx, sy, sw and sh undefined
+    } 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('Invalid number of arguments');
+    }
+
+    var slImage;
+
+    // If we have a source rect we need to clip the image.
+    if (arguments.length == 9) {
+      slImage = drawShape(this, '<Image Source="%1"/>', [image.src]);
+
+      var clipRect = create(this,
+          '<RectangleGeometry Rect="%1,%2,%3,%4"/>', [sx, sy, sw, sh]);
+      slImage.clip = clipRect;
+
+      var m = createMatrixIdentity();
+
+      // translate to 0,0
+      m[2][0] = -sx;
+      m[2][1] = -sy;
+
+      // scale
+      var m2 = createMatrixIdentity();
+      m2[0][0] = dw / sw;
+      m2[1][1] = dh / sh;
+
+      m = matrixMultiply(m, m2);
+
+      // translate to destination
+      m[2][0] += dx;
+      m[2][1] += dy;
+
+      transformObject(this, slImage, m);
+
+    } else {
+      slImage = drawShape(this,
+          '<Image Source="%1" Canvas.Left="%2" Canvas.Top="%3"/>',
+          [image.src, dx, dy]);
+      if (dw != undefined || dh != undefined) {
+        slImage.width = dw;
+        slImage.height = dh;
+        slImage.stretch = 'fill';
+      }
+    }
+  };
+
+  contextPrototype.stroke = function() {
+    if (this.currentPath_.length == 0) return;
+    var path = drawShape(this, '<Path Data="%1"/>',
+                         [this.currentPath_.join(' ')]);
+    path.stroke = createBrushObject(this, this.strokeStyle);
+    path.opacity = this.globalAlpha;
+    path.strokeThickness = this.lineWidth;
+    path.strokeMiterLimit = this.miterLimit;
+    path.strokeLineJoin = this.lineJoin;
+    // Canvas does not differentiate start from end
+    path.strokeEndLineCap = path.strokeStartLineCap =
+        processLineCap(this.lineCap);
+  };
+
+  contextPrototype.fill = function() {
+    if (this.currentPath_.length == 0) return;
+    var path = drawShape(this, '<Path Data="%1"/>',
+                         [this.currentPath_.join(' ')]);
+    // The spec says to use non zero but Silverlight uses EvenOdd by defaul
+    path.data.fillRule = 'NonZero';
+    path.fill = createBrushObject(this, this.fillStyle);
+    // TODO: What about even-odd etc?
+  };
+
+  contextPrototype.closePath = function() {
+    this.currentPath_.push('z');
+  };
+
+  /**
+   * Sets the transformation matrix and marks things as dirty
+   */
+  function setM(self, m) {
+    self.m_ = m;
+    self.lastCanvas_ = null;
+  };
+
+  contextPrototype.save = function() {
+    var o = {};
+    copyState(this, o);
+    this.aStack_.push(o);
+    this.mStack_.push(this.m_);
+    setM(this, matrixMultiply(createMatrixIdentity(), this.m_));
+  };
+
+  contextPrototype.restore = function() {
+    copyState(this.aStack_.pop(), this);
+    setM(this, this.mStack_.pop());
+  };
+
+  contextPrototype.translate = function(aX, aY) {
+    var m1 = [
+      [1,  0,  0],
+      [0,  1,  0],
+      [aX, aY, 1]
+    ];
+
+    setM(this, matrixMultiply(m1, this.m_));
+  };
+
+  contextPrototype.rotate = function(aRot) {
+    var c = Math.cos(aRot);
+    var s = Math.sin(aRot);
+
+    var m1 = [
+      [c,  s, 0],
+      [-s, c, 0],
+      [0,  0, 1]
+    ];
+
+    setM(this, matrixMultiply(m1, this.m_));
+  };
+
+  contextPrototype.scale = function(aX, aY) {
+    var m1 = [
+      [aX, 0,  0],
+      [0,  aY, 0],
+      [0,  0,  1]
+    ];
+
+    setM(this, matrixMultiply(m1, this.m_));
+  };
+
+  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_));
+  };
+
+  contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
+    setM(this, [
+      [m11, m12, 0],
+      [m21, m22, 0],
+      [ dx,  dy, 1],
+    ]);
+  };
+
+  /******** STUBS ********/
+  contextPrototype.clip = function() {
+    // TODO: Implement
+  };
+
+  contextPrototype.createPattern = function() {
+    return new CanvasPattern_;
+  };
+
+  // Gradient / Pattern Stubs
+  function CanvasGradient_() {
+    this.colors_ = [];
+  }
+
+  CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
+    aColor = translateColor(aColor);
+    this.colors_.push({offset: aOffset, color: aColor});
+  };
+
+  CanvasGradient_.prototype.createStops_ = function(ctx, brushObj, colors) {
+    var gradientStopCollection = brushObj.gradientStops;
+    for (var i = 0, c; c = colors[i]; i++) {
+      var color = translateColor(c.color);
+      gradientStopCollection.add(create(ctx,
+          '<GradientStop Color="%1" Offset="%2"/>', [color, c.offset]));
+    }
+  };
+
+  function LinearCanvasGradient_(x0, y0, x1, y1) {
+    CanvasGradient_.call(this);
+    this.x0_ = x0;
+    this.y0_ = y0;
+    this.x1_ = x1;
+    this.y1_ = y1;
+  }
+  LinearCanvasGradient_.prototype = new CanvasGradient_;
+
+  LinearCanvasGradient_.prototype.createBrush_ = function(ctx) {
+    var brushObj = create(ctx, '<LinearGradientBrush MappingMode="Absolute" ' +
+                          'StartPoint="%1,%2" EndPoint="%3,%4"/>',
+                          [this.x0_, this.y0_, this.x1_, this.y1_]);
+    this.createStops_(ctx, brushObj, this.colors_);
+    return brushObj;
+  };
+
+  function isNanOrInfinite(v) {
+    return isNaN(v) || !isFinite(v);
+  }
+
+  function RadialCanvasGradient_(x0, y0, r0, x1, y1, r1) {
+    if (r0 < 0 || r1 < 0 || isNanOrInfinite(x0) || isNanOrInfinite(y0) ||
+        isNanOrInfinite(x1) || isNanOrInfinite(y1)) {
+      // IE does not support DOMException so this is as close as we get.
+      var error = Error('DOMException.INDEX_SIZE_ERR');
+      error.code = 1;
+      throw error;
+    }
+
+    CanvasGradient_.call(this);
+    this.x0_ = x0;
+    this.y0_ = y0;
+    this.r0_ = r0;
+    this.x1_ = x1;
+    this.y1_ = y1;
+    this.r1_ = r1;
+  }
+  RadialCanvasGradient_.prototype = new CanvasGradient_;
+
+  CanvasGradient_.prototype.createBrush_ = function(ctx) {
+    if (this.x0_ == this.x1_ && this.y0_ == this.y1_ && this.r0_ == this.r1_) {
+      return null;
+    }
+
+    var radius = Math.max(this.r0_, this.r1_);
+    var minRadius = Math.min(this.r0_, this.r1_);
+    var brushObj = create(ctx, '<RadialGradientBrush MappingMode="Absolute" ' +
+                          'GradientOrigin="%1,%2" Center="%3,%4" ' +
+                          'RadiusX="%5" RadiusY="%5"/>',
+                          [this.x0_, this.y0_, this.x1_, this.y1_, radius]);
+
+    var colors = this.colors_.concat();
+
+    if (this.r1_ < this.r0_) {
+      // reverse color stop array
+      colors.reverse();
+      for (var i = 0, c; c = colors[i]; i++) {
+        c.offset = 1 - c.offset;
+      }
+    }
+
+    // sort the color stops
+    colors.sort(function(c1, c2) {
+      return c1.offset - c2.offset;
+    });
+
+    if (minRadius > 0) {
+      // We need to adjust the color stops since SL always have the inner radius
+      // at (0, 0) so we change the stops in case the min radius is not 0.
+      for (var i = 0, c; c = colors[i]; i++) {
+        c.offset = minRadius / radius + (radius - minRadius) / radius * c.offset;
+      }
+    }
+
+    this.createStops_(ctx, brushObj, colors);
+    return brushObj;
+  };
+
+  function CanvasPattern_() {}
+
+  // set up externs
+  G_vmlCanvasManager = G_vmlCanvasManager_;
+  CanvasRenderingContext2D = CanvasRenderingContext2D_;
+  CanvasGradient = CanvasGradient_;
+  CanvasPattern = CanvasPattern_;
+
+})();
+
+} // if