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, '&').replace(/"/g, '"');

    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 

  1120   contextPrototype.save = function() {

  1121     var o = {};

  1122     copyState(this, o);

  1123     this.aStack_.push(o);

  1124     this.mStack_.push(this.m_);

  1125     this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);

  1126   };

  1127 

  1128   contextPrototype.restore = function() {

  1129     if (this.aStack_.length) {

  1130       copyState(this.aStack_.pop(), this);

  1131       this.m_ = this.mStack_.pop();

  1132     }

  1133   };

  1134 

  1135   function matrixIsFinite(m) {