src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/flot/excanvas.js

   1 // Copyright 2006 Google Inc.
   2 //
   3 // Licensed under the Apache License, Version 2.0 (the "License");
   4 // you may not use this file except in compliance with the License.
   5 // You may obtain a copy of the License at
   6 //
   7 //   http://www.apache.org/licenses/LICENSE-2.0
   8 //
   9 // Unless required by applicable law or agreed to in writing, software
  10 // distributed under the License is distributed on an "AS IS" BASIS,
  11 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12 // See the License for the specific language governing permissions and
  13 // limitations under the License.
  14
  15
  16 // Known Issues:
  17 //
  18 // * Patterns only support repeat.
  19 // * Radial gradient are not implemented. The VML version of these look very
  20 //   different from the canvas one.
  21 // * Clipping paths are not implemented.
  22 // * Coordsize. The width and height attribute have higher priority than the
  23 //   width and height style values which isn't correct.
  24 // * Painting mode isn't implemented.
  25 // * Canvas width/height should is using content-box by default. IE in
  26 //   Quirks mode will draw the canvas using border-box. Either change your
  27 //   doctype to HTML5
  28 //   (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
  29 //   or use Box Sizing Behavior from WebFX
  30 //   (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
  31 // * Non uniform scaling does not correctly scale strokes.
  32 // * Filling very large shapes (above 5000 points) is buggy.
  33 // * Optimize. There is always room for speed improvements.
  34
  35 // Only add this code if we do not already have a canvas implementation
  36 if (!document.createElement('canvas').getContext) {
  37
  38 (function() {
  39
  40   // alias some functions to make (compiled) code shorter
  41   var m = Math;
  42   var mr = m.round;
  43   var ms = m.sin;
  44   var mc = m.cos;
  45   var abs = m.abs;
  46   var sqrt = m.sqrt;
  47
  48   // this is used for sub pixel precision
  49   var Z = 10;
  50   var Z2 = Z / 2;
  51
  52   var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
  53
  54   /**
  55    * This funtion is assigned to the <canvas> elements as element.getContext().
  56    * @this {HTMLElement}
  57    * @return {CanvasRenderingContext2D_}
  58    */
  59   function getContext() {
  60     return this.context_ ||
  61         (this.context_ = new CanvasRenderingContext2D_(this));
  62   }
  63
  64   var slice = Array.prototype.slice;
  65
  66   /**
  67    * Binds a function to an object. The returned function will always use the
  68    * passed in {@code obj} as {@code this}.
  69    *
  70    * Example:
  71    *
  72    *   g = bind(f, obj, a, b)
  73    *   g(c, d) // will do f.call(obj, a, b, c, d)
  74    *
  75    * @param {Function} f The function to bind the object to
  76    * @param {Object} obj The object that should act as this when the function
  77    *     is called
  78    * @param {*} var_args Rest arguments that will be used as the initial
  79    *     arguments when the function is called
  80    * @return {Function} A new function that has bound this
  81    */
  82   function bind(f, obj, var_args) {
  83     var a = slice.call(arguments, 2);
  84     return function() {
  85       return f.apply(obj, a.concat(slice.call(arguments)));
  86     };
  87   }
  88
  89   function encodeHtmlAttribute(s) {
  90     return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
  91   }
  92
  93   function addNamespace(doc, prefix, urn) {
  94     if (!doc.namespaces[prefix]) {
  95       doc.namespaces.add(prefix, urn, '#default#VML');
  96     }
  97   }
  98
  99   function addNamespacesAndStylesheet(doc) {
 100     addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
 101     addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
 102
 103     // Setup default CSS.  Only add one style sheet per document
 104     if (!doc.styleSheets['ex_canvas_']) {
 105       var ss = doc.createStyleSheet();
 106       ss.owningElement.id = 'ex_canvas_';
 107       ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
 108           // default size is 300x150 in Gecko and Opera
 109           'text-align:left;width:300px;height:150px}';
 110     }
 111   }
 112
 113   // Add namespaces and stylesheet at startup.
 114   addNamespacesAndStylesheet(document);
 115
 116   var G_vmlCanvasManager_ = {
 117     init: function(opt_doc) {
 118       var doc = opt_doc || document;
 119       // Create a dummy element so that IE will allow canvas elements to be
 120       // recognized.
 121       doc.createElement('canvas');
 122       doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
 123     },
 124
 125     init_: function(doc) {
 126       // find all canvas elements
 127       var els = doc.getElementsByTagName('canvas');
 128       for (var i = 0; i < els.length; i++) {
 129         this.initElement(els[i]);
 130       }
 131     },
 132
 133     /**
 134      * Public initializes a canvas element so that it can be used as canvas
 135      * element from now on. This is called automatically before the page is
 136      * loaded but if you are creating elements using createElement you need to
 137      * make sure this is called on the element.
 138      * @param {HTMLElement} el The canvas element to initialize.
 139      * @return {HTMLElement} the element that was created.
 140      */
 141     initElement: function(el) {
 142       if (!el.getContext) {
 143         el.getContext = getContext;
 144
 145         // Add namespaces and stylesheet to document of the element.
 146         addNamespacesAndStylesheet(el.ownerDocument);
 147
 148         // Remove fallback content. There is no way to hide text nodes so we
 149         // just remove all childNodes. We could hide all elements and remove
 150         // text nodes but who really cares about the fallback content.
 151         el.innerHTML = '';
 152
 153         // do not use inline function because that will leak memory
 154         el.attachEvent('onpropertychange', onPropertyChange);
 155         el.attachEvent('onresize', onResize);
 156
 157         var attrs = el.attributes;
 158         if (attrs.width && attrs.width.specified) {
 159           // TODO: use runtimeStyle and coordsize
 160           // el.getContext().setWidth_(attrs.width.nodeValue);
 161           el.style.width = attrs.width.nodeValue + 'px';
 162         } else {
 163           el.width = el.clientWidth;
 164         }
 165         if (attrs.height && attrs.height.specified) {
 166           // TODO: use runtimeStyle and coordsize
 167           // el.getContext().setHeight_(attrs.height.nodeValue);
 168           el.style.height = attrs.height.nodeValue + 'px';
 169         } else {
 170           el.height = el.clientHeight;
 171         }
 172         //el.getContext().setCoordsize_()
 173       }
 174       return el;
 175     }
 176   };
 177
 178   function onPropertyChange(e) {
 179     var el = e.srcElement;
 180
 181     switch (e.propertyName) {
 182       case 'width':
 183         el.getContext().clearRect();
 184         el.style.width = el.attributes.width.nodeValue + 'px';
 185         // In IE8 this does not trigger onresize.
 186         el.firstChild.style.width =  el.clientWidth + 'px';
 187         break;
 188       case 'height':
 189         el.getContext().clearRect();
 190         el.style.height = el.attributes.height.nodeValue + 'px';
 191         el.firstChild.style.height = el.clientHeight + 'px';
 192         break;
 193     }
 194   }
 195
 196   function onResize(e) {
 197     var el = e.srcElement;
 198     if (el.firstChild) {
 199       el.firstChild.style.width =  el.clientWidth + 'px';
 200       el.firstChild.style.height = el.clientHeight + 'px';
 201     }
 202   }
 203
 204   G_vmlCanvasManager_.init();
 205
 206   // precompute "00" to "FF"
 207   var decToHex = [];
 208   for (var i = 0; i < 16; i++) {
 209     for (var j = 0; j < 16; j++) {
 210       decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
 211     }
 212   }
 213
 214   function createMatrixIdentity() {
 215     return [
 216       [1, 0, 0],
 217       [0, 1, 0],
 218       [0, 0, 1]
 219     ];
 220   }
 221
 222   function matrixMultiply(m1, m2) {
 223     var result = createMatrixIdentity();
 224
 225     for (var x = 0; x < 3; x++) {
 226       for (var y = 0; y < 3; y++) {
 227         var sum = 0;
 228
 229         for (var z = 0; z < 3; z++) {
 230           sum += m1[x][z] * m2[z][y];
 231         }
 232
 233         result[x][y] = sum;
 234       }
 235     }
 236     return result;
 237   }
 238
 239   function copyState(o1, o2) {
 240     o2.fillStyle     = o1.fillStyle;
 241     o2.lineCap       = o1.lineCap;
 242     o2.lineJoin      = o1.lineJoin;
 243     o2.lineWidth     = o1.lineWidth;
 244     o2.miterLimit    = o1.miterLimit;
 245     o2.shadowBlur    = o1.shadowBlur;
 246     o2.shadowColor   = o1.shadowColor;
 247     o2.shadowOffsetX = o1.shadowOffsetX;
 248     o2.shadowOffsetY = o1.shadowOffsetY;
 249     o2.strokeStyle   = o1.strokeStyle;
 250     o2.globalAlpha   = o1.globalAlpha;
 251     o2.font          = o1.font;
 252     o2.textAlign     = o1.textAlign;
 253     o2.textBaseline  = o1.textBaseline;
 254     o2.arcScaleX_    = o1.arcScaleX_;
 255     o2.arcScaleY_    = o1.arcScaleY_;
 256     o2.lineScale_    = o1.lineScale_;
 257   }
 258
 259   var colorData = {
 260     aliceblue: '#F0F8FF',
 261     antiquewhite: '#FAEBD7',
 262     aquamarine: '#7FFFD4',
 263     azure: '#F0FFFF',
 264     beige: '#F5F5DC',
 265     bisque: '#FFE4C4',
 266     black: '#000000',
 267     blanchedalmond: '#FFEBCD',
 268     blueviolet: '#8A2BE2',
 269     brown: '#A52A2A',
 270     burlywood: '#DEB887',
 271     cadetblue: '#5F9EA0',
 272     chartreuse: '#7FFF00',
 273     chocolate: '#D2691E',
 274     coral: '#FF7F50',
 275     cornflowerblue: '#6495ED',
 276     cornsilk: '#FFF8DC',
 277     crimson: '#DC143C',
 278     cyan: '#00FFFF',
 279     darkblue: '#00008B',
 280     darkcyan: '#008B8B',
 281     darkgoldenrod: '#B8860B',
 282     darkgray: '#A9A9A9',
 283     darkgreen: '#006400',
 284     darkgrey: '#A9A9A9',
 285     darkkhaki: '#BDB76B',
 286     darkmagenta: '#8B008B',
 287     darkolivegreen: '#556B2F',
 288     darkorange: '#FF8C00',
 289     darkorchid: '#9932CC',
 290     darkred: '#8B0000',
 291     darksalmon: '#E9967A',
 292     darkseagreen: '#8FBC8F',
 293     darkslateblue: '#483D8B',
 294     darkslategray: '#2F4F4F',
 295     darkslategrey: '#2F4F4F',
 296     darkturquoise: '#00CED1',
 297     darkviolet: '#9400D3',
 298     deeppink: '#FF1493',
 299     deepskyblue: '#00BFFF',
 300     dimgray: '#696969',
 301     dimgrey: '#696969',
 302     dodgerblue: '#1E90FF',
 303     firebrick: '#B22222',
 304     floralwhite: '#FFFAF0',
 305     forestgreen: '#228B22',
 306     gainsboro: '#DCDCDC',
 307     ghostwhite: '#F8F8FF',
 308     gold: '#FFD700',
 309     goldenrod: '#DAA520',
 310     grey: '#808080',
 311     greenyellow: '#ADFF2F',
 312     honeydew: '#F0FFF0',
 313     hotpink: '#FF69B4',
 314     indianred: '#CD5C5C',
 315     indigo: '#4B0082',
 316     ivory: '#FFFFF0',
 317     khaki: '#F0E68C',
 318     lavender: '#E6E6FA',
 319     lavenderblush: '#FFF0F5',
 320     lawngreen: '#7CFC00',
 321     lemonchiffon: '#FFFACD',
 322     lightblue: '#ADD8E6',
 323     lightcoral: '#F08080',
 324     lightcyan: '#E0FFFF',
 325     lightgoldenrodyellow: '#FAFAD2',
 326     lightgreen: '#90EE90',
 327     lightgrey: '#D3D3D3',
 328     lightpink: '#FFB6C1',
 329     lightsalmon: '#FFA07A',
 330     lightseagreen: '#20B2AA',
 331     lightskyblue: '#87CEFA',
 332     lightslategray: '#778899',
 333     lightslategrey: '#778899',
 334     lightsteelblue: '#B0C4DE',
 335     lightyellow: '#FFFFE0',
 336     limegreen: '#32CD32',
 337     linen: '#FAF0E6',
 338     magenta: '#FF00FF',
 339     mediumaquamarine: '#66CDAA',
 340     mediumblue: '#0000CD',
 341     mediumorchid: '#BA55D3',
 342     mediumpurple: '#9370DB',
 343     mediumseagreen: '#3CB371',
 344     mediumslateblue: '#7B68EE',
 345     mediumspringgreen: '#00FA9A',
 346     mediumturquoise: '#48D1CC',
 347     mediumvioletred: '#C71585',
 348     midnightblue: '#191970',
 349     mintcream: '#F5FFFA',
 350     mistyrose: '#FFE4E1',
 351     moccasin: '#FFE4B5',
 352     navajowhite: '#FFDEAD',
 353     oldlace: '#FDF5E6',
 354     olivedrab: '#6B8E23',
 355     orange: '#FFA500',
 356     orangered: '#FF4500',
 357     orchid: '#DA70D6',
 358     palegoldenrod: '#EEE8AA',
 359     palegreen: '#98FB98',
 360     paleturquoise: '#AFEEEE',
 361     palevioletred: '#DB7093',
 362     papayawhip: '#FFEFD5',
 363     peachpuff: '#FFDAB9',
 364     peru: '#CD853F',
 365     pink: '#FFC0CB',
 366     plum: '#DDA0DD',
 367     powderblue: '#B0E0E6',
 368     rosybrown: '#BC8F8F',
 369     royalblue: '#4169E1',
 370     saddlebrown: '#8B4513',
 371     salmon: '#FA8072',
 372     sandybrown: '#F4A460',
 373     seagreen: '#2E8B57',
 374     seashell: '#FFF5EE',
 375     sienna: '#A0522D',
 376     skyblue: '#87CEEB',
 377     slateblue: '#6A5ACD',
 378     slategray: '#708090',
 379     slategrey: '#708090',
 380     snow: '#FFFAFA',
 381     springgreen: '#00FF7F',
 382     steelblue: '#4682B4',
 383     tan: '#D2B48C',
 384     thistle: '#D8BFD8',
 385     tomato: '#FF6347',
 386     turquoise: '#40E0D0',
 387     violet: '#EE82EE',
 388     wheat: '#F5DEB3',
 389     whitesmoke: '#F5F5F5',
 390     yellowgreen: '#9ACD32'
 391   };
 392
 393
 394   function getRgbHslContent(styleString) {
 395     var start = styleString.indexOf('(', 3);
 396     var end = styleString.indexOf(')', start + 1);
 397     var parts = styleString.substring(start + 1, end).split(',');
 398     // add alpha if needed
 399     if (parts.length != 4 || styleString.charAt(3) != 'a') {
 400       parts[3] = 1;
 401     }
 402     return parts;
 403   }
 404
 405   function percent(s) {
 406     return parseFloat(s) / 100;
 407   }
 408
 409   function clamp(v, min, max) {
 410     return Math.min(max, Math.max(min, v));
 411   }
 412
 413   function hslToRgb(parts){
 414     var r, g, b, h, s, l;
 415     h = parseFloat(parts[0]) / 360 % 360;
 416     if (h < 0)
 417       h++;
 418     s = clamp(percent(parts[1]), 0, 1);
 419     l = clamp(percent(parts[2]), 0, 1);
 420     if (s == 0) {
 421       r = g = b = l; // achromatic
 422     } else {
 423       var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
 424       var p = 2 * l - q;
 425       r = hueToRgb(p, q, h + 1 / 3);
 426       g = hueToRgb(p, q, h);
 427       b = hueToRgb(p, q, h - 1 / 3);
 428     }
 429
 430     return '#' + decToHex[Math.floor(r * 255)] +
 431         decToHex[Math.floor(g * 255)] +
 432         decToHex[Math.floor(b * 255)];
 433   }
 434
 435   function hueToRgb(m1, m2, h) {
 436     if (h < 0)
 437       h++;
 438     if (h > 1)
 439       h--;
 440
 441     if (6 * h < 1)
 442       return m1 + (m2 - m1) * 6 * h;
 443     else if (2 * h < 1)
 444       return m2;
 445     else if (3 * h < 2)
 446       return m1 + (m2 - m1) * (2 / 3 - h) * 6;
 447     else
 448       return m1;
 449   }
 450
 451   var processStyleCache = {};
 452
 453   function processStyle(styleString) {
 454     if (styleString in processStyleCache) {
 455       return processStyleCache[styleString];
 456     }
 457
 458     var str, alpha = 1;
 459
 460     styleString = String(styleString);
 461     if (styleString.charAt(0) == '#') {
 462       str = styleString;
 463     } else if (/^rgb/.test(styleString)) {
 464       var parts = getRgbHslContent(styleString);
 465       var str = '#', n;
 466       for (var i = 0; i < 3; i++) {
 467         if (parts[i].indexOf('%') != -1) {
 468           n = Math.floor(percent(parts[i]) * 255);
 469         } else {
 470           n = +parts[i];
 471         }
 472         str += decToHex[clamp(n, 0, 255)];
 473       }
 474       alpha = +parts[3];
 475     } else if (/^hsl/.test(styleString)) {
 476       var parts = getRgbHslContent(styleString);
 477       str = hslToRgb(parts);
 478       alpha = parts[3];
 479     } else {
 480       str = colorData[styleString] || styleString;
 481     }
 482     return processStyleCache[styleString] = {color: str, alpha: alpha};
 483   }
 484
 485   var DEFAULT_STYLE = {
 486     style: 'normal',
 487     variant: 'normal',
 488     weight: 'normal',
 489     size: 10,
 490     family: 'sans-serif'
 491   };
 492
 493   // Internal text style cache
 494   var fontStyleCache = {};
 495
 496   function processFontStyle(styleString) {
 497     if (fontStyleCache[styleString]) {
 498       return fontStyleCache[styleString];
 499     }
 500
 501     var el = document.createElement('div');
 502     var style = el.style;
 503     try {
 504       style.font = styleString;
 505     } catch (ex) {
 506       // Ignore failures to set to invalid font.
 507     }
 508
 509     return fontStyleCache[styleString] = {
 510       style: style.fontStyle || DEFAULT_STYLE.style,
 511       variant: style.fontVariant || DEFAULT_STYLE.variant,
 512       weight: style.fontWeight || DEFAULT_STYLE.weight,
 513       size: style.fontSize || DEFAULT_STYLE.size,
 514       family: style.fontFamily || DEFAULT_STYLE.family
 515     };
 516   }
 517
 518   function getComputedStyle(style, element) {
 519     var computedStyle = {};
 520
 521     for (var p in style) {
 522       computedStyle[p] = style[p];
 523     }
 524
 525     // Compute the size
 526     var canvasFontSize = parseFloat(element.currentStyle.fontSize),
 527         fontSize = parseFloat(style.size);
 528
 529     if (typeof style.size == 'number') {
 530       computedStyle.size = style.size;
 531     } else if (style.size.indexOf('px') != -1) {
 532       computedStyle.size = fontSize;
 533     } else if (style.size.indexOf('em') != -1) {
 534       computedStyle.size = canvasFontSize * fontSize;
 535     } else if(style.size.indexOf('%') != -1) {
 536       computedStyle.size = (canvasFontSize / 100) * fontSize;
 537     } else if (style.size.indexOf('pt') != -1) {
 538       computedStyle.size = fontSize / .75;
 539     } else {
 540       computedStyle.size = canvasFontSize;
 541     }
 542
 543     // Different scaling between normal text and VML text. This was found using
 544     // trial and error to get the same size as non VML text.
 545     computedStyle.size *= 0.981;
 546
 547     return computedStyle;
 548   }
 549
 550   function buildStyle(style) {
 551     return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
 552         style.size + 'px ' + style.family;
 553   }
 554
 555   var lineCapMap = {
 556     'butt': 'flat',
 557     'round': 'round'
 558   };
 559
 560   function processLineCap(lineCap) {
 561     return lineCapMap[lineCap] || 'square';
 562   }
 563
 564   /**
 565    * This class implements CanvasRenderingContext2D interface as described by
 566    * the WHATWG.
 567    * @param {HTMLElement} canvasElement The element that the 2D context should
 568    * be associated with
 569    */
 570   function CanvasRenderingContext2D_(canvasElement) {
 571     this.m_ = createMatrixIdentity();
 572
 573     this.mStack_ = [];
 574     this.aStack_ = [];
 575     this.currentPath_ = [];
 576
 577     // Canvas context properties
 578     this.strokeStyle = '#000';
 579     this.fillStyle = '#000';
 580
 581     this.lineWidth = 1;
 582     this.lineJoin = 'miter';
 583     this.lineCap = 'butt';
 584     this.miterLimit = Z * 1;
 585     this.globalAlpha = 1;
 586     this.font = '10px sans-serif';
 587     this.textAlign = 'left';
 588     this.textBaseline = 'alphabetic';
 589     this.canvas = canvasElement;
 590
 591     var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
 592         canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
 593     var el = canvasElement.ownerDocument.createElement('div');
 594     el.style.cssText = cssText;
 595     canvasElement.appendChild(el);
 596
 597     var overlayEl = el.cloneNode(false);
 598     // Use a non transparent background.
 599     overlayEl.style.backgroundColor = 'red';
 600     overlayEl.style.filter = 'alpha(opacity=0)';
 601     canvasElement.appendChild(overlayEl);
 602
 603     this.element_ = el;
 604     this.arcScaleX_ = 1;
 605     this.arcScaleY_ = 1;
 606     this.lineScale_ = 1;
 607   }
 608
 609   var contextPrototype = CanvasRenderingContext2D_.prototype;
 610   contextPrototype.clearRect = function() {
 611     if (this.textMeasureEl_) {
 612       this.textMeasureEl_.removeNode(true);
 613       this.textMeasureEl_ = null;
 614     }
 615     this.element_.innerHTML = '';
 616   };
 617
 618   contextPrototype.beginPath = function() {
 619     // TODO: Branch current matrix so that save/restore has no effect
 620     //       as per safari docs.
 621     this.currentPath_ = [];
 622   };
 623
 624   contextPrototype.moveTo = function(aX, aY) {
 625     var p = getCoords(this, aX, aY);
 626     this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
 627     this.currentX_ = p.x;
 628     this.currentY_ = p.y;
 629   };
 630
 631   contextPrototype.lineTo = function(aX, aY) {
 632     var p = getCoords(this, aX, aY);
 633     this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
 634
 635     this.currentX_ = p.x;
 636     this.currentY_ = p.y;
 637   };
 638
 639   contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
 640                                             aCP2x, aCP2y,
 641                                             aX, aY) {
 642     var p = getCoords(this, aX, aY);
 643     var cp1 = getCoords(this, aCP1x, aCP1y);
 644     var cp2 = getCoords(this, aCP2x, aCP2y);
 645     bezierCurveTo(this, cp1, cp2, p);
 646   };
 647
 648   // Helper function that takes the already fixed cordinates.
 649   function bezierCurveTo(self, cp1, cp2, p) {
 650     self.currentPath_.push({
 651       type: 'bezierCurveTo',
 652       cp1x: cp1.x,
 653       cp1y: cp1.y,
 654       cp2x: cp2.x,
 655       cp2y: cp2.y,
 656       x: p.x,
 657       y: p.y
 658     });
 659     self.currentX_ = p.x;
 660     self.currentY_ = p.y;
 661   }
 662
 663   contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
 664     // the following is lifted almost directly from
 665     // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
 666
 667     var cp = getCoords(this, aCPx, aCPy);
 668     var p = getCoords(this, aX, aY);
 669
 670     var cp1 = {
 671       x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
 672       y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
 673     };
 674     var cp2 = {
 675       x: cp1.x + (p.x - this.currentX_) / 3.0,
 676       y: cp1.y + (p.y - this.currentY_) / 3.0
 677     };
 678
 679     bezierCurveTo(this, cp1, cp2, p);
 680   };
 681
 682   contextPrototype.arc = function(aX, aY, aRadius,
 683                                   aStartAngle, aEndAngle, aClockwise) {
 684     aRadius *= Z;
 685     var arcType = aClockwise ? 'at' : 'wa';
 686
 687     var xStart = aX + mc(aStartAngle) * aRadius - Z2;
 688     var yStart = aY + ms(aStartAngle) * aRadius - Z2;
 689
 690     var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
 691     var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
 692
 693     // IE won't render arches drawn counter clockwise if xStart == xEnd.
 694     if (xStart == xEnd && !aClockwise) {
 695       xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
 696                        // that can be represented in binary
 697     }
 698
 699     var p = getCoords(this, aX, aY);
 700     var pStart = getCoords(this, xStart, yStart);
 701     var pEnd = getCoords(this, xEnd, yEnd);
 702
 703     this.currentPath_.push({type: arcType,
 704                            x: p.x,
 705                            y: p.y,
 706                            radius: aRadius,
 707                            xStart: pStart.x,
 708                            yStart: pStart.y,
 709                            xEnd: pEnd.x,
 710                            yEnd: pEnd.y});
 711
 712   };
 713
 714   contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
 715     this.moveTo(aX, aY);
 716     this.lineTo(aX + aWidth, aY);
 717     this.lineTo(aX + aWidth, aY + aHeight);
 718     this.lineTo(aX, aY + aHeight);
 719     this.closePath();
 720   };
 721
 722   contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
 723     var oldPath = this.currentPath_;
 724     this.beginPath();
 725
 726     this.moveTo(aX, aY);
 727     this.lineTo(aX + aWidth, aY);
 728     this.lineTo(aX + aWidth, aY + aHeight);
 729     this.lineTo(aX, aY + aHeight);
 730     this.closePath();
 731     this.stroke();
 732
 733     this.currentPath_ = oldPath;
 734   };
 735
 736   contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
 737     var oldPath = this.currentPath_;
 738     this.beginPath();
 739
 740     this.moveTo(aX, aY);
 741     this.lineTo(aX + aWidth, aY);
 742     this.lineTo(aX + aWidth, aY + aHeight);
 743     this.lineTo(aX, aY + aHeight);
 744     this.closePath();
 745     this.fill();
 746
 747     this.currentPath_ = oldPath;
 748   };
 749
 750   contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
 751     var gradient = new CanvasGradient_('gradient');
 752     gradient.x0_ = aX0;
 753     gradient.y0_ = aY0;
 754     gradient.x1_ = aX1;
 755     gradient.y1_ = aY1;
 756     return gradient;
 757   };
 758
 759   contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
 760                                                    aX1, aY1, aR1) {
 761     var gradient = new CanvasGradient_('gradientradial');
 762     gradient.x0_ = aX0;
 763     gradient.y0_ = aY0;
 764     gradient.r0_ = aR0;
 765     gradient.x1_ = aX1;
 766     gradient.y1_ = aY1;
 767     gradient.r1_ = aR1;
 768     return gradient;
 769   };
 770
 771   contextPrototype.drawImage = function(image, var_args) {
 772     var dx, dy, dw, dh, sx, sy, sw, sh;
 773
 774     // to find the original width we overide the width and height
 775     var oldRuntimeWidth = image.runtimeStyle.width;
 776     var oldRuntimeHeight = image.runtimeStyle.height;
 777     image.runtimeStyle.width = 'auto';
 778     image.runtimeStyle.height = 'auto';
 779
 780     // get the original size
 781     var w = image.width;
 782     var h = image.height;
 783
 784     // and remove overides
 785     image.runtimeStyle.width = oldRuntimeWidth;
 786     image.runtimeStyle.height = oldRuntimeHeight;
 787
 788     if (arguments.length == 3) {
 789       dx = arguments[1];
 790       dy = arguments[2];
 791       sx = sy = 0;
 792       sw = dw = w;
 793       sh = dh = h;
 794     } else if (arguments.length == 5) {
 795       dx = arguments[1];
 796       dy = arguments[2];
 797       dw = arguments[3];
 798       dh = arguments[4];
 799       sx = sy = 0;
 800       sw = w;
 801       sh = h;
 802     } else if (arguments.length == 9) {
 803       sx = arguments[1];
 804       sy = arguments[2];
 805       sw = arguments[3];
 806       sh = arguments[4];
 807       dx = arguments[5];
 808       dy = arguments[6];
 809       dw = arguments[7];
 810       dh = arguments[8];
 811     } else {
 812       throw Error('Invalid number of arguments');
 813     }
 814
 815     var d = getCoords(this, dx, dy);
 816
 817     var w2 = sw / 2;
 818     var h2 = sh / 2;
 819
 820     var vmlStr = [];
 821
 822     var W = 10;
 823     var H = 10;
 824
 825     // For some reason that I've now forgotten, using divs didn't work
 826     vmlStr.push(' <g_vml_:group',
 827                 ' coordsize="', Z * W, ',', Z * H, '"',
 828                 ' coordorigin="0,0"' ,
 829                 ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
 830
 831     // If filters are necessary (rotation exists), create them
 832     // filters are bog-slow, so only create them if abbsolutely necessary
 833     // The following check doesn't account for skews (which don't exist
 834     // in the canvas spec (yet) anyway.
 835
 836     if (this.m_[0][0] != 1 || this.m_[0][1] ||
 837         this.m_[1][1] != 1 || this.m_[1][0]) {
 838       var filter = [];
 839
 840       // Note the 12/21 reversal
 841       filter.push('M11=', this.m_[0][0], ',',
 842                   'M12=', this.m_[1][0], ',',
 843                   'M21=', this.m_[0][1], ',',
 844                   'M22=', this.m_[1][1], ',',
 845                   'Dx=', mr(d.x / Z), ',',
 846                   'Dy=', mr(d.y / Z), '');
 847
 848       // Bounding box calculation (need to minimize displayed area so that
 849       // filters don't waste time on unused pixels.
 850       var max = d;
 851       var c2 = getCoords(this, dx + dw, dy);
 852       var c3 = getCoords(this, dx, dy + dh);
 853       var c4 = getCoords(this, dx + dw, dy + dh);
 854
 855       max.x = m.max(max.x, c2.x, c3.x, c4.x);
 856       max.y = m.max(max.y, c2.y, c3.y, c4.y);
 857
 858       vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
 859                   'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
 860                   filter.join(''), ", sizingmethod='clip');");
 861
 862     } else {
 863       vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
 864     }
 865
 866     vmlStr.push(' ">' ,
 867                 '<g_vml_:image src="', image.src, '"',
 868                 ' style="width:', Z * dw, 'px;',
 869                 ' height:', Z * dh, 'px"',
 870                 ' cropleft="', sx / w, '"',
 871                 ' croptop="', sy / h, '"',
 872                 ' cropright="', (w - sx - sw) / w, '"',
 873                 ' cropbottom="', (h - sy - sh) / h, '"',
 874                 ' />',
 875                 '</g_vml_:group>');
 876
 877     this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
 878   };
 879
 880   contextPrototype.stroke = function(aFill) {
 881     var W = 10;
 882     var H = 10;
 883     // Divide the shape into chunks if it's too long because IE has a limit
 884     // somewhere for how long a VML shape can be. This simple division does
 885     // not work with fills, only strokes, unfortunately.
 886     var chunkSize = 5000;
 887
 888     var min = {x: null, y: null};
 889     var max = {x: null, y: null};
 890
 891     for (var j = 0; j < this.currentPath_.length; j += chunkSize) {
 892       var lineStr = [];
 893       var lineOpen = false;
 894
 895       lineStr.push('<g_vml_:shape',
 896                    ' filled="', !!aFill, '"',
 897                    ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
 898                    ' coordorigin="0,0"',
 899                    ' coordsize="', Z * W, ',', Z * H, '"',
 900                    ' stroked="', !aFill, '"',
 901                    ' path="');
 902
 903       var newSeq = false;
 904
 905       for (var i = j; i < Math.min(j + chunkSize, this.currentPath_.length); i++) {
 906         if (i % chunkSize == 0 && i > 0) { // move into position for next chunk
 907           lineStr.push(' m ', mr(this.currentPath_[i-1].x), ',', mr(this.currentPath_[i-1].y));
 908         }
 909
 910         var p = this.currentPath_[i];
 911         var c;
 912
 913         switch (p.type) {
 914           case 'moveTo':
 915             c = p;
 916             lineStr.push(' m ', mr(p.x), ',', mr(p.y));
 917             break;
 918           case 'lineTo':
 919             lineStr.push(' l ', mr(p.x), ',', mr(p.y));
 920             break;
 921           case 'close':
 922             lineStr.push(' x ');
 923             p = null;
 924             break;
 925           case 'bezierCurveTo':
 926             lineStr.push(' c ',
 927                          mr(p.cp1x), ',', mr(p.cp1y), ',',
 928                          mr(p.cp2x), ',', mr(p.cp2y), ',',
 929                          mr(p.x), ',', mr(p.y));
 930             break;
 931           case 'at':
 932           case 'wa':
 933             lineStr.push(' ', p.type, ' ',
 934                          mr(p.x - this.arcScaleX_ * p.radius), ',',
 935                          mr(p.y - this.arcScaleY_ * p.radius), ' ',
 936                          mr(p.x + this.arcScaleX_ * p.radius), ',',
 937                          mr(p.y + this.arcScaleY_ * p.radius), ' ',
 938                          mr(p.xStart), ',', mr(p.yStart), ' ',
 939                          mr(p.xEnd), ',', mr(p.yEnd));
 940             break;
 941         }
 942
 943
 944         // TODO: Following is broken for curves due to
 945         //       move to proper paths.
 946
 947         // Figure out dimensions so we can do gradient fills
 948         // properly
 949         if (p) {
 950           if (min.x == null || p.x < min.x) {
 951             min.x = p.x;
 952           }
 953           if (max.x == null || p.x > max.x) {
 954             max.x = p.x;
 955           }
 956           if (min.y == null || p.y < min.y) {
 957             min.y = p.y;
 958           }
 959           if (max.y == null || p.y > max.y) {
 960             max.y = p.y;
 961           }
 962         }
 963       }
 964       lineStr.push(' ">');
 965
 966       if (!aFill) {
 967         appendStroke(this, lineStr);
 968       } else {
 969         appendFill(this, lineStr, min, max);
 970       }
 971
 972       lineStr.push('</g_vml_:shape>');
 973
 974       this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
 975     }
 976   };
 977
 978   function appendStroke(ctx, lineStr) {
 979     var a = processStyle(ctx.strokeStyle);
 980     var color = a.color;
 981     var opacity = a.alpha * ctx.globalAlpha;
 982     var lineWidth = ctx.lineScale_ * ctx.lineWidth;
 983
 984     // VML cannot correctly render a line if the width is less than 1px.
 985     // In that case, we dilute the color to make the line look thinner.
 986     if (lineWidth < 1) {
 987       opacity *= lineWidth;
 988     }
 989
 990     lineStr.push(
 991       '<g_vml_:stroke',
 992       ' opacity="', opacity, '"',
 993       ' joinstyle="', ctx.lineJoin, '"',
 994       ' miterlimit="', ctx.miterLimit, '"',
 995       ' endcap="', processLineCap(ctx.lineCap), '"',
 996       ' weight="', lineWidth, 'px"',
 997       ' color="', color, '" />'
 998     );
 999   }
1000
1001   function appendFill(ctx, lineStr, min, max) {
1002     var fillStyle = ctx.fillStyle;
1003     var arcScaleX = ctx.arcScaleX_;
1004     var arcScaleY = ctx.arcScaleY_;
1005     var width = max.x - min.x;
1006     var height = max.y - min.y;
1007     if (fillStyle instanceof CanvasGradient_) {
1008       // TODO: Gradients transformed with the transformation matrix.
1009       var angle = 0;
1010       var focus = {x: 0, y: 0};
1011
1012       // additional offset
1013       var shift = 0;
1014       // scale factor for offset
1015       var expansion = 1;
1016
1017       if (fillStyle.type_ == 'gradient') {
1018         var x0 = fillStyle.x0_ / arcScaleX;
1019         var y0 = fillStyle.y0_ / arcScaleY;
1020         var x1 = fillStyle.x1_ / arcScaleX;
1021         var y1 = fillStyle.y1_ / arcScaleY;
1022         var p0 = getCoords(ctx, x0, y0);
1023         var p1 = getCoords(ctx, x1, y1);
1024         var dx = p1.x - p0.x;
1025         var dy = p1.y - p0.y;
1026         angle = Math.atan2(dx, dy) * 180 / Math.PI;
1027
1028         // The angle should be a non-negative number.
1029         if (angle < 0) {
1030           angle += 360;
1031         }
1032
1033         // Very small angles produce an unexpected result because they are
1034         // converted to a scientific notation string.
1035         if (angle < 1e-6) {
1036           angle = 0;
1037         }
1038       } else {
1039         var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
1040         focus = {
1041           x: (p0.x - min.x) / width,
1042           y: (p0.y - min.y) / height
1043         };
1044
1045         width  /= arcScaleX * Z;
1046         height /= arcScaleY * Z;
1047         var dimension = m.max(width, height);
1048         shift = 2 * fillStyle.r0_ / dimension;
1049         expansion = 2 * fillStyle.r1_ / dimension - shift;
1050       }
1051
1052       // We need to sort the color stops in ascending order by offset,
1053       // otherwise IE won't interpret it correctly.
1054       var stops = fillStyle.colors_;
1055       stops.sort(function(cs1, cs2) {
1056         return cs1.offset - cs2.offset;
1057       });
1058
1059       var length = stops.length;
1060       var color1 = stops[0].color;
1061       var color2 = stops[length - 1].color;
1062       var opacity1 = stops[0].alpha * ctx.globalAlpha;
1063       var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
1064
1065       var colors = [];
1066       for (var i = 0; i < length; i++) {
1067         var stop = stops[i];
1068         colors.push(stop.offset * expansion + shift + ' ' + stop.color);
1069       }
1070
1071       // When colors attribute is used, the meanings of opacity and o:opacity2
1072       // are reversed.
1073       lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
1074                    ' method="none" focus="100%"',
1075                    ' color="', color1, '"',
1076                    ' color2="', color2, '"',
1077                    ' colors="', colors.join(','), '"',
1078                    ' opacity="', opacity2, '"',
1079                    ' g_o_:opacity2="', opacity1, '"',
1080                    ' angle="', angle, '"',
1081                    ' focusposition="', focus.x, ',', focus.y, '" />');
1082     } else if (fillStyle instanceof CanvasPattern_) {
1083       if (width && height) {
1084         var deltaLeft = -min.x;
1085         var deltaTop = -min.y;
1086         lineStr.push('<g_vml_:fill',
1087                      ' position="',
1088                      deltaLeft / width * arcScaleX * arcScaleX, ',',
1089                      deltaTop / height * arcScaleY * arcScaleY, '"',
1090                      ' type="tile"',
1091                      // TODO: Figure out the correct size to fit the scale.
1092                      //' size="', w, 'px ', h, 'px"',
1093                      ' src="', fillStyle.src_, '" />');
1094        }
1095     } else {
1096       var a = processStyle(ctx.fillStyle);
1097       var color = a.color;
1098       var opacity = a.alpha * ctx.globalAlpha;
1099       lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
1100                    '" />');
1101     }
1102   }
1103
1104   contextPrototype.fill = function() {
1105     this.stroke(true);
1106   };
1107
1108   contextPrototype.closePath = function() {
1109     this.currentPath_.push({type: 'close'});
1110   };
1111
1112   function getCoords(ctx, aX, aY) {
1113     var m = ctx.m_;
1114     return {
1115       x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
1116       y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
1117     };
1118   }
1119     contextPrototype.save = function() {
1120     var o = {};
1121     copyState(this, o);
1122     this.aStack_.push(o);
1123     this.mStack_.push(this.m_);
1124     this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
1125   };
1126
1127   contextPrototype.restore = function() {
1128     if (this.aStack_.length) {
1129       copyState(this.aStack_.pop(), this);
1130       this.m_ = this.mStack_.pop();
1131     }
1132   };
1133
1134   function matrixIsFinite(m) {
1135     return isFinite(m[0][0]) && isFinite(m[0][1]) &&
1136         isFinite(m[1][0]) && isFinite(m[1][1]) &&
1137         isFinite(m[2][0]) && isFinite(m[2][1]);
1138   }
1139
1140   function setM(ctx, m, updateLineScale) {
1141     if (!matrixIsFinite(m)) {
1142       return;
1143     }
1144     ctx.m_ = m;
1145
1146     if (updateLineScale) {
1147       // Get the line scale.
1148       // Determinant of this.m_ means how much the area is enlarged by the
1149       // transformation. So its square root can be used as a scale factor
1150       // for width.
1151       var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
1152       ctx.lineScale_ = sqrt(abs(det));
1153     }
1154   }
1155
1156   contextPrototype.translate = function(aX, aY) {
1157     var m1 = [
1158       [1,  0,  0],
1159       [0,  1,  0],
1160       [aX, aY, 1]
1161     ];
1162
1163     setM(this, matrixMultiply(m1, this.m_), false);
1164   };
1165
1166   contextPrototype.rotate = function(aRot) {
1167     var c = mc(aRot);
1168     var s = ms(aRot);
1169
1170     var m1 = [
1171       [c,  s, 0],
1172       [-s, c, 0],
1173       [0,  0, 1]
1174     ];
1175
1176     setM(this, matrixMultiply(m1, this.m_), false);
1177   };
1178
1179   contextPrototype.scale = function(aX, aY) {
1180     this.arcScaleX_ *= aX;
1181     this.arcScaleY_ *= aY;
1182     var m1 = [
1183       [aX, 0,  0],
1184       [0,  aY, 0],
1185       [0,  0,  1]
1186     ];
1187
1188     setM(this, matrixMultiply(m1, this.m_), true);
1189   };
1190
1191   contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
1192     var m1 = [
1193       [m11, m12, 0],
1194       [m21, m22, 0],
1195       [dx,  dy,  1]
1196     ];
1197
1198     setM(this, matrixMultiply(m1, this.m_), true);
1199   };
1200
1201   contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
1202     var m = [
1203       [m11, m12, 0],
1204       [m21, m22, 0],
1205       [dx,  dy,  1]
1206     ];
1207
1208     setM(this, m, true);
1209   };
1210
1211   /**
1212    * The text drawing function.
1213    * The maxWidth argument isn't taken in account, since no browser supports
1214    * it yet.
1215    */
1216   contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
1217     var m = this.m_,
1218         delta = 1000,
1219         left = 0,
1220         right = delta,
1221         offset = {x: 0, y: 0},
1222         lineStr = [];
1223
1224     var fontStyle = getComputedStyle(processFontStyle(this.font),
1225                                      this.element_);
1226
1227     var fontStyleString = buildStyle(fontStyle);
1228
1229     var elementStyle = this.element_.currentStyle;
1230     var textAlign = this.textAlign.toLowerCase();
1231     switch (textAlign) {
1232       case 'left':
1233       case 'center':
1234       case 'right':
1235         break;
1236       case 'end':
1237         textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
1238         break;
1239       case 'start':
1240         textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
1241         break;
1242       default:
1243         textAlign = 'left';
1244     }
1245
1246     // 1.75 is an arbitrary number, as there is no info about the text baseline
1247     switch (this.textBaseline) {
1248       case 'hanging':
1249       case 'top':
1250         offset.y = fontStyle.size / 1.75;
1251         break;
1252       case 'middle':
1253         break;
1254       default:
1255       case null:
1256       case 'alphabetic':
1257       case 'ideographic':
1258       case 'bottom':
1259         offset.y = -fontStyle.size / 2.25;
1260         break;
1261     }
1262
1263     switch(textAlign) {
1264       case 'right':
1265         left = delta;
1266         right = 0.05;
1267         break;
1268       case 'center':
1269         left = right = delta / 2;
1270         break;
1271     }
1272
1273     var d = getCoords(this, x + offset.x, y + offset.y);
1274
1275     lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
1276                  ' coordsize="100 100" coordorigin="0 0"',
1277                  ' filled="', !stroke, '" stroked="', !!stroke,
1278                  '" style="position:absolute;width:1px;height:1px;">');
1279
1280     if (stroke) {
1281       appendStroke(this, lineStr);
1282     } else {
1283       // TODO: Fix the min and max params.
1284       appendFill(this, lineStr, {x: -left, y: 0},
1285                  {x: right, y: fontStyle.size});
1286     }
1287
1288     var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
1289                 m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
1290
1291     var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
1292
1293     lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
1294                  ' offset="', skewOffset, '" origin="', left ,' 0" />',
1295                  '<g_vml_:path textpathok="true" />',
1296                  '<g_vml_:textpath on="true" string="',
1297                  encodeHtmlAttribute(text),
1298                  '" style="v-text-align:', textAlign,
1299                  ';font:', encodeHtmlAttribute(fontStyleString),
1300                  '" /></g_vml_:line>');
1301
1302     this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
1303   };
1304
1305   contextPrototype.fillText = function(text, x, y, maxWidth) {
1306     this.drawText_(text, x, y, maxWidth, false);
1307   };
1308
1309   contextPrototype.strokeText = function(text, x, y, maxWidth) {
1310     this.drawText_(text, x, y, maxWidth, true);
1311   };
1312
1313   contextPrototype.measureText = function(text) {
1314     if (!this.textMeasureEl_) {
1315       var s = '<span style="position:absolute;' +
1316           'top:-20000px;left:0;padding:0;margin:0;border:none;' +
1317           'white-space:pre;"></span>';
1318       this.element_.insertAdjacentHTML('beforeEnd', s);
1319       this.textMeasureEl_ = this.element_.lastChild;
1320     }
1321     var doc = this.element_.ownerDocument;
1322     this.textMeasureEl_.innerHTML = '';
1323     this.textMeasureEl_.style.font = this.font;
1324     // Don't use innerHTML or innerText because they allow markup/whitespace.
1325     this.textMeasureEl_.appendChild(doc.createTextNode(text));
1326     return {width: this.textMeasureEl_.offsetWidth};
1327   };
1328
1329   /******** STUBS ********/
1330   contextPrototype.clip = function() {
1331     // TODO: Implement
1332   };
1333
1334   contextPrototype.arcTo = function() {
1335     // TODO: Implement
1336   };
1337
1338   contextPrototype.createPattern = function(image, repetition) {
1339     return new CanvasPattern_(image, repetition);
1340   };
1341
1342   // Gradient / Pattern Stubs
1343   function CanvasGradient_(aType) {
1344     this.type_ = aType;
1345     this.x0_ = 0;
1346     this.y0_ = 0;
1347     this.r0_ = 0;
1348     this.x1_ = 0;
1349     this.y1_ = 0;
1350     this.r1_ = 0;
1351     this.colors_ = [];
1352   }
1353
1354   CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
1355     aColor = processStyle(aColor);
1356     this.colors_.push({offset: aOffset,
1357                        color: aColor.color,
1358                        alpha: aColor.alpha});
1359   };
1360
1361   function CanvasPattern_(image, repetition) {
1362     assertImageIsValid(image);
1363     switch (repetition) {
1364       case 'repeat':
1365       case null:
1366       case '':
1367         this.repetition_ = 'repeat';
1368         break;
1369       case 'repeat-x':
1370       case 'repeat-y':
1371       case 'no-repeat':
1372         this.repetition_ = repetition;
1373         break;
1374       default:
1375         throwException('SYNTAX_ERR');
1376     }
1377
1378     this.src_ = image.src;
1379     this.width_ = image.width;
1380     this.height_ = image.height;
1381   }
1382
1383   function throwException(s) {
1384     throw new DOMException_(s);
1385   }
1386
1387   function assertImageIsValid(img) {
1388     if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
1389       throwException('TYPE_MISMATCH_ERR');
1390     }
1391     if (img.readyState != 'complete') {
1392       throwException('INVALID_STATE_ERR');
1393     }
1394   }
1395
1396   function DOMException_(s) {
1397     this.code = this[s];
1398     this.message = s +': DOM Exception ' + this.code;
1399   }
1400   var p = DOMException_.prototype = new Error;
1401   p.INDEX_SIZE_ERR = 1;
1402   p.DOMSTRING_SIZE_ERR = 2;
1403   p.HIERARCHY_REQUEST_ERR = 3;
1404   p.WRONG_DOCUMENT_ERR = 4;
1405   p.INVALID_CHARACTER_ERR = 5;
1406   p.NO_DATA_ALLOWED_ERR = 6;
1407   p.NO_MODIFICATION_ALLOWED_ERR = 7;
1408   p.NOT_FOUND_ERR = 8;
1409   p.NOT_SUPPORTED_ERR = 9;
1410   p.INUSE_ATTRIBUTE_ERR = 10;
1411   p.INVALID_STATE_ERR = 11;
1412   p.SYNTAX_ERR = 12;
1413   p.INVALID_MODIFICATION_ERR = 13;
1414   p.NAMESPACE_ERR = 14;
1415   p.INVALID_ACCESS_ERR = 15;
1416   p.VALIDATION_ERR = 16;
1417   p.TYPE_MISMATCH_ERR = 17;
1418
1419   // set up externs
1420   G_vmlCanvasManager = G_vmlCanvasManager_;
1421   CanvasRenderingContext2D = CanvasRenderingContext2D_;
1422   CanvasGradient = CanvasGradient_;
1423   CanvasPattern = CanvasPattern_;
1424   DOMException = DOMException_;
1425 })();
1426
1427 } // if