themes/default/js/excanvas.js

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