testing/MCTXWeb/public_html/static/html2canvas.js

   1 /*
   2   html2canvas 0.4.1 <http://html2canvas.hertzen.com>
   3   Copyright (c) 2013 Niklas von Hertzen
   4
   5   Released under MIT License
   6 */
   7
   8 (function(window, document, undefined){
   9
  10 "use strict";
  11
  12 var _html2canvas = {},
  13 previousElement,
  14 computedCSS,
  15 html2canvas;
  16
  17 _html2canvas.Util = {};
  18
  19 _html2canvas.Util.log = function(a) {
  20   if (_html2canvas.logging && window.console && window.console.log) {
  21     window.console.log(a);
  22   }
  23 };
  24
  25 _html2canvas.Util.trimText = (function(isNative){
  26   return function(input) {
  27     return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );
  28   };
  29 })(String.prototype.trim);
  30
  31 _html2canvas.Util.asFloat = function(v) {
  32   return parseFloat(v);
  33 };
  34
  35 (function() {
  36   // TODO: support all possible length values
  37   var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
  38   var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;
  39   _html2canvas.Util.parseTextShadows = function (value) {
  40     if (!value || value === 'none') {
  41       return [];
  42     }
  43
  44     // find multiple shadow declarations
  45     var shadows = value.match(TEXT_SHADOW_PROPERTY),
  46       results = [];
  47     for (var i = 0; shadows && (i < shadows.length); i++) {
  48       var s = shadows[i].match(TEXT_SHADOW_VALUES);
  49       results.push({
  50         color: s[0],
  51         offsetX: s[1] ? s[1].replace('px', '') : 0,
  52         offsetY: s[2] ? s[2].replace('px', '') : 0,
  53         blur: s[3] ? s[3].replace('px', '') : 0
  54       });
  55     }
  56     return results;
  57   };
  58 })();
  59
  60
  61 _html2canvas.Util.parseBackgroundImage = function (value) {
  62     var whitespace = ' \r\n\t',
  63         method, definition, prefix, prefix_i, block, results = [],
  64         c, mode = 0, numParen = 0, quote, args;
  65
  66     var appendResult = function(){
  67         if(method) {
  68             if(definition.substr( 0, 1 ) === '"') {
  69                 definition = definition.substr( 1, definition.length - 2 );
  70             }
  71             if(definition) {
  72                 args.push(definition);
  73             }
  74             if(method.substr( 0, 1 ) === '-' &&
  75                     (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) {
  76                 prefix = method.substr( 0, prefix_i);
  77                 method = method.substr( prefix_i );
  78             }
  79             results.push({
  80                 prefix: prefix,
  81                 method: method.toLowerCase(),
  82                 value: block,
  83                 args: args
  84             });
  85         }
  86         args = []; //for some odd reason, setting .length = 0 didn't work in safari
  87         method =
  88             prefix =
  89             definition =
  90             block = '';
  91     };
  92
  93     appendResult();
  94     for(var i = 0, ii = value.length; i<ii; i++) {
  95         c = value[i];
  96         if(mode === 0 && whitespace.indexOf( c ) > -1){
  97             continue;
  98         }
  99         switch(c) {
 100             case '"':
 101                 if(!quote) {
 102                     quote = c;
 103                 }
 104                 else if(quote === c) {
 105                     quote = null;
 106                 }
 107                 break;
 108
 109             case '(':
 110                 if(quote) { break; }
 111                 else if(mode === 0) {
 112                     mode = 1;
 113                     block += c;
 114                     continue;
 115                 } else {
 116                     numParen++;
 117                 }
 118                 break;
 119
 120             case ')':
 121                 if(quote) { break; }
 122                 else if(mode === 1) {
 123                     if(numParen === 0) {
 124                         mode = 0;
 125                         block += c;
 126                         appendResult();
 127                         continue;
 128                     } else {
 129                         numParen--;
 130                     }
 131                 }
 132                 break;
 133
 134             case ',':
 135                 if(quote) { break; }
 136                 else if(mode === 0) {
 137                     appendResult();
 138                     continue;
 139                 }
 140                 else if (mode === 1) {
 141                     if(numParen === 0 && !method.match(/^url$/i)) {
 142                         args.push(definition);
 143                         definition = '';
 144                         block += c;
 145                         continue;
 146                     }
 147                 }
 148                 break;
 149         }
 150
 151         block += c;
 152         if(mode === 0) { method += c; }
 153         else { definition += c; }
 154     }
 155     appendResult();
 156
 157     return results;
 158 };
 159
 160 _html2canvas.Util.Bounds = function (element) {
 161   var clientRect, bounds = {};
 162
 163   if (element.getBoundingClientRect){
 164     clientRect = element.getBoundingClientRect();
 165
 166     // TODO add scroll position to bounds, so no scrolling of window necessary
 167     bounds.top = clientRect.top;
 168     bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);
 169     bounds.left = clientRect.left;
 170
 171     bounds.width = element.offsetWidth;
 172     bounds.height = element.offsetHeight;
 173   }
 174
 175   return bounds;
 176 };
 177
 178 // TODO ideally, we'd want everything to go through this function instead of Util.Bounds,
 179 // but would require further work to calculate the correct positions for elements with offsetParents
 180 _html2canvas.Util.OffsetBounds = function (element) {
 181   var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0};
 182
 183   return {
 184     top: element.offsetTop + parent.top,
 185     bottom: element.offsetTop + element.offsetHeight + parent.top,
 186     left: element.offsetLeft + parent.left,
 187     width: element.offsetWidth,
 188     height: element.offsetHeight
 189   };
 190 };
 191
 192 function toPX(element, attribute, value ) {
 193     var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute],
 194         left,
 195         style = element.style;
 196
 197     // Check if we are not dealing with pixels, (Opera has issues with this)
 198     // Ported from jQuery css.js
 199     // From the awesome hack by Dean Edwards
 200     // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
 201
 202     // If we're not dealing with a regular pixel number
 203     // but a number that has a weird ending, we need to convert it to pixels
 204
 205     if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( value ) && /^-?\d/.test(value) ) {
 206         // Remember the original values
 207         left = style.left;
 208
 209         // Put in the new values to get a computed value out
 210         if (rsLeft) {
 211             element.runtimeStyle.left = element.currentStyle.left;
 212         }
 213         style.left = attribute === "fontSize" ? "1em" : (value || 0);
 214         value = style.pixelLeft + "px";
 215
 216         // Revert the changed values
 217         style.left = left;
 218         if (rsLeft) {
 219             element.runtimeStyle.left = rsLeft;
 220         }
 221     }
 222
 223     if (!/^(thin|medium|thick)$/i.test(value)) {
 224         return Math.round(parseFloat(value)) + "px";
 225     }
 226
 227     return value;
 228 }
 229
 230 function asInt(val) {
 231     return parseInt(val, 10);
 232 }
 233
 234 function parseBackgroundSizePosition(value, element, attribute, index) {
 235     value = (value || '').split(',');
 236     value = value[index || 0] || value[0] || 'auto';
 237     value = _html2canvas.Util.trimText(value).split(' ');
 238
 239     if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) {
 240         //these values will be handled in the parent function
 241     } else {
 242         value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];
 243         if(value[1] === undefined) {
 244             if(attribute === 'backgroundSize') {
 245                 value[1] = 'auto';
 246                 return value;
 247             } else {
 248                 // IE 9 doesn't return double digit always
 249                 value[1] = value[0];
 250             }
 251         }
 252         value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1];
 253     }
 254     return value;
 255 }
 256
 257 _html2canvas.Util.getCSS = function (element, attribute, index) {
 258     if (previousElement !== element) {
 259       computedCSS = document.defaultView.getComputedStyle(element, null);
 260     }
 261
 262     var value = computedCSS[attribute];
 263
 264     if (/^background(Size|Position)$/.test(attribute)) {
 265         return parseBackgroundSizePosition(value, element, attribute, index);
 266     } else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) {
 267       var arr = value.split(" ");
 268       if (arr.length <= 1) {
 269           arr[1] = arr[0];
 270       }
 271       return arr.map(asInt);
 272     }
 273
 274   return value;
 275 };
 276
 277 _html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){
 278   var target_ratio = target_width / target_height,
 279     current_ratio = current_width / current_height,
 280     output_width, output_height;
 281
 282   if(!stretch_mode || stretch_mode === 'auto') {
 283     output_width = target_width;
 284     output_height = target_height;
 285   } else if(target_ratio < current_ratio ^ stretch_mode === 'contain') {
 286     output_height = target_height;
 287     output_width = target_height * current_ratio;
 288   } else {
 289     output_width = target_width;
 290     output_height = target_width / current_ratio;
 291   }
 292
 293   return {
 294     width: output_width,
 295     height: output_height
 296   };
 297 };
 298
 299 function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {
 300     var bgposition =  _html2canvas.Util.getCSS( el, prop, imageIndex ) ,
 301     topPos,
 302     left,
 303     percentage,
 304     val;
 305
 306     if (bgposition.length === 1){
 307       val = bgposition[0];
 308
 309       bgposition = [];
 310
 311       bgposition[0] = val;
 312       bgposition[1] = val;
 313     }
 314
 315     if (bgposition[0].toString().indexOf("%") !== -1){
 316       percentage = (parseFloat(bgposition[0])/100);
 317       left = bounds.width * percentage;
 318       if(prop !== 'backgroundSize') {
 319         left -= (backgroundSize || image).width*percentage;
 320       }
 321     } else {
 322       if(prop === 'backgroundSize') {
 323         if(bgposition[0] === 'auto') {
 324           left = image.width;
 325         } else {
 326           if (/contain|cover/.test(bgposition[0])) {
 327             var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]);
 328             left = resized.width;
 329             topPos = resized.height;
 330           } else {
 331             left = parseInt(bgposition[0], 10);
 332           }
 333         }
 334       } else {
 335         left = parseInt( bgposition[0], 10);
 336       }
 337     }
 338
 339
 340     if(bgposition[1] === 'auto') {
 341       topPos = left / image.width * image.height;
 342     } else if (bgposition[1].toString().indexOf("%") !== -1){
 343       percentage = (parseFloat(bgposition[1])/100);
 344       topPos =  bounds.height * percentage;
 345       if(prop !== 'backgroundSize') {
 346         topPos -= (backgroundSize || image).height * percentage;
 347       }
 348
 349     } else {
 350       topPos = parseInt(bgposition[1],10);
 351     }
 352
 353     return [left, topPos];
 354 }
 355
 356 _html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {
 357     var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );
 358     return { left: result[0], top: result[1] };
 359 };
 360
 361 _html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {
 362     var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex );
 363     return { width: result[0], height: result[1] };
 364 };
 365
 366 _html2canvas.Util.Extend = function (options, defaults) {
 367   for (var key in options) {
 368     if (options.hasOwnProperty(key)) {
 369       defaults[key] = options[key];
 370     }
 371   }
 372   return defaults;
 373 };
 374
 375
 376 /*
 377  * Derived from jQuery.contents()
 378  * Copyright 2010, John Resig
 379  * Dual licensed under the MIT or GPL Version 2 licenses.
 380  * http://jquery.org/license
 381  */
 382 _html2canvas.Util.Children = function( elem ) {
 383   var children;
 384   try {
 385     children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function(array) {
 386       var ret = [];
 387       if (array !== null) {
 388         (function(first, second ) {
 389           var i = first.length,
 390           j = 0;
 391
 392           if (typeof second.length === "number") {
 393             for (var l = second.length; j < l; j++) {
 394               first[i++] = second[j];
 395             }
 396           } else {
 397             while (second[j] !== undefined) {
 398               first[i++] = second[j++];
 399             }
 400           }
 401
 402           first.length = i;
 403
 404           return first;
 405         })(ret, array);
 406       }
 407       return ret;
 408     })(elem.childNodes);
 409
 410   } catch (ex) {
 411     _html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message);
 412     children = [];
 413   }
 414   return children;
 415 };
 416
 417 _html2canvas.Util.isTransparent = function(backgroundColor) {
 418   return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");
 419 };
 420 _html2canvas.Util.Font = (function () {
 421
 422   var fontData = {};
 423
 424   return function(font, fontSize, doc) {
 425     if (fontData[font + "-" + fontSize] !== undefined) {
 426       return fontData[font + "-" + fontSize];
 427     }
 428
 429     var container = doc.createElement('div'),
 430     img = doc.createElement('img'),
 431     span = doc.createElement('span'),
 432     sampleText = 'Hidden Text',
 433     baseline,
 434     middle,
 435     metricsObj;
 436
 437     container.style.visibility = "hidden";
 438     container.style.fontFamily = font;
 439     container.style.fontSize = fontSize;
 440     container.style.margin = 0;
 441     container.style.padding = 0;
 442
 443     doc.body.appendChild(container);
 444
 445     // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)
 446     img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";
 447     img.width = 1;
 448     img.height = 1;
 449
 450     img.style.margin = 0;
 451     img.style.padding = 0;
 452     img.style.verticalAlign = "baseline";
 453
 454     span.style.fontFamily = font;
 455     span.style.fontSize = fontSize;
 456     span.style.margin = 0;
 457     span.style.padding = 0;
 458
 459     span.appendChild(doc.createTextNode(sampleText));
 460     container.appendChild(span);
 461     container.appendChild(img);
 462     baseline = (img.offsetTop - span.offsetTop) + 1;
 463
 464     container.removeChild(span);
 465     container.appendChild(doc.createTextNode(sampleText));
 466
 467     container.style.lineHeight = "normal";
 468     img.style.verticalAlign = "super";
 469
 470     middle = (img.offsetTop-container.offsetTop) + 1;
 471     metricsObj = {
 472       baseline: baseline,
 473       lineWidth: 1,
 474       middle: middle
 475     };
 476
 477     fontData[font + "-" + fontSize] = metricsObj;
 478
 479     doc.body.removeChild(container);
 480
 481     return metricsObj;
 482   };
 483 })();
 484
 485 (function(){
 486   var Util = _html2canvas.Util,
 487     Generate = {};
 488
 489   _html2canvas.Generate = Generate;
 490
 491   var reGradients = [
 492   /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
 493   /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,
 494   /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/,
 495   /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/,
 496   /^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/,
 497   /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/,
 498   /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/
 499   ];
 500
 501   /*
 502  * TODO: Add IE10 vendor prefix (-ms) support
 503  * TODO: Add W3C gradient (linear-gradient) support
 504  * TODO: Add old Webkit -webkit-gradient(radial, ...) support
 505  * TODO: Maybe some RegExp optimizations are possible ;o)
 506  */
 507   Generate.parseGradient = function(css, bounds) {
 508     var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl;
 509
 510     for(i = 0; i < len; i+=1){
 511       m1 = css.match(reGradients[i]);
 512       if(m1) {
 513         break;
 514       }
 515     }
 516
 517     if(m1) {
 518       switch(m1[1]) {
 519         case '-webkit-linear-gradient':
 520         case '-o-linear-gradient':
 521
 522           gradient = {
 523             type: 'linear',
 524             x0: null,
 525             y0: null,
 526             x1: null,
 527             y1: null,
 528             colorStops: []
 529           };
 530
 531           // get coordinates
 532           m2 = m1[2].match(/\w+/g);
 533           if(m2){
 534             m2Len = m2.length;
 535             for(i = 0; i < m2Len; i+=1){
 536               switch(m2[i]) {
 537                 case 'top':
 538                   gradient.y0 = 0;
 539                   gradient.y1 = bounds.height;
 540                   break;
 541
 542                 case 'right':
 543                   gradient.x0 = bounds.width;
 544                   gradient.x1 = 0;
 545                   break;
 546
 547                 case 'bottom':
 548                   gradient.y0 = bounds.height;
 549                   gradient.y1 = 0;
 550                   break;
 551
 552                 case 'left':
 553                   gradient.x0 = 0;
 554                   gradient.x1 = bounds.width;
 555                   break;
 556               }
 557             }
 558           }
 559           if(gradient.x0 === null && gradient.x1 === null){ // center
 560             gradient.x0 = gradient.x1 = bounds.width / 2;
 561           }
 562           if(gradient.y0 === null && gradient.y1 === null){ // center
 563             gradient.y0 = gradient.y1 = bounds.height / 2;
 564           }
 565
 566           // get colors and stops
 567           m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
 568           if(m2){
 569             m2Len = m2.length;
 570             step = 1 / Math.max(m2Len - 1, 1);
 571             for(i = 0; i < m2Len; i+=1){
 572               m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
 573               if(m3[2]){
 574                 stop = parseFloat(m3[2]);
 575                 if(m3[3] === '%'){
 576                   stop /= 100;
 577                 } else { // px - stupid opera
 578                   stop /= bounds.width;
 579                 }
 580               } else {
 581                 stop = i * step;
 582               }
 583               gradient.colorStops.push({
 584                 color: m3[1],
 585                 stop: stop
 586               });
 587             }
 588           }
 589           break;
 590
 591         case '-webkit-gradient':
 592
 593           gradient = {
 594             type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions
 595             x0: 0,
 596             y0: 0,
 597             x1: 0,
 598             y1: 0,
 599             colorStops: []
 600           };
 601
 602           // get coordinates
 603           m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);
 604           if(m2){
 605             gradient.x0 = (m2[1] * bounds.width) / 100;
 606             gradient.y0 = (m2[2] * bounds.height) / 100;
 607             gradient.x1 = (m2[3] * bounds.width) / 100;
 608             gradient.y1 = (m2[4] * bounds.height) / 100;
 609           }
 610
 611           // get colors and stops
 612           m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g);
 613           if(m2){
 614             m2Len = m2.length;
 615             for(i = 0; i < m2Len; i+=1){
 616               m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/);
 617               stop = parseFloat(m3[2]);
 618               if(m3[1] === 'from') {
 619                 stop = 0.0;
 620               }
 621               if(m3[1] === 'to') {
 622                 stop = 1.0;
 623               }
 624               gradient.colorStops.push({
 625                 color: m3[3],
 626                 stop: stop
 627               });
 628             }
 629           }
 630           break;
 631
 632         case '-moz-linear-gradient':
 633
 634           gradient = {
 635             type: 'linear',
 636             x0: 0,
 637             y0: 0,
 638             x1: 0,
 639             y1: 0,
 640             colorStops: []
 641           };
 642
 643           // get coordinates
 644           m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
 645
 646           // m2[1] == 0%   -> left
 647           // m2[1] == 50%  -> center
 648           // m2[1] == 100% -> right
 649
 650           // m2[2] == 0%   -> top
 651           // m2[2] == 50%  -> center
 652           // m2[2] == 100% -> bottom
 653
 654           if(m2){
 655             gradient.x0 = (m2[1] * bounds.width) / 100;
 656             gradient.y0 = (m2[2] * bounds.height) / 100;
 657             gradient.x1 = bounds.width - gradient.x0;
 658             gradient.y1 = bounds.height - gradient.y0;
 659           }
 660
 661           // get colors and stops
 662           m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);
 663           if(m2){
 664             m2Len = m2.length;
 665             step = 1 / Math.max(m2Len - 1, 1);
 666             for(i = 0; i < m2Len; i+=1){
 667               m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);
 668               if(m3[2]){
 669                 stop = parseFloat(m3[2]);
 670                 if(m3[3]){ // percentage
 671                   stop /= 100;
 672                 }
 673               } else {
 674                 stop = i * step;
 675               }
 676               gradient.colorStops.push({
 677                 color: m3[1],
 678                 stop: stop
 679               });
 680             }
 681           }
 682           break;
 683
 684         case '-webkit-radial-gradient':
 685         case '-moz-radial-gradient':
 686         case '-o-radial-gradient':
 687
 688           gradient = {
 689             type: 'circle',
 690             x0: 0,
 691             y0: 0,
 692             x1: bounds.width,
 693             y1: bounds.height,
 694             cx: 0,
 695             cy: 0,
 696             rx: 0,
 697             ry: 0,
 698             colorStops: []
 699           };
 700
 701           // center
 702           m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);
 703           if(m2){
 704             gradient.cx = (m2[1] * bounds.width) / 100;
 705             gradient.cy = (m2[2] * bounds.height) / 100;
 706           }
 707
 708           // size
 709           m2 = m1[3].match(/\w+/);
 710           m3 = m1[4].match(/[a-z\-]*/);
 711           if(m2 && m3){
 712             switch(m3[0]){
 713               case 'farthest-corner':
 714               case 'cover': // is equivalent to farthest-corner
 715               case '': // mozilla removes "cover" from definition :(
 716                 tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
 717                 tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
 718                 br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
 719                 bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
 720                 gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);
 721                 break;
 722               case 'closest-corner':
 723                 tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));
 724                 tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
 725                 br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));
 726                 bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));
 727                 gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);
 728                 break;
 729               case 'farthest-side':
 730                 if(m2[0] === 'circle'){
 731                   gradient.rx = gradient.ry = Math.max(
 732                     gradient.cx,
 733                     gradient.cy,
 734                     gradient.x1 - gradient.cx,
 735                     gradient.y1 - gradient.cy
 736                     );
 737                 } else { // ellipse
 738
 739                   gradient.type = m2[0];
 740
 741                   gradient.rx = Math.max(
 742                     gradient.cx,
 743                     gradient.x1 - gradient.cx
 744                     );
 745                   gradient.ry = Math.max(
 746                     gradient.cy,
 747                     gradient.y1 - gradient.cy
 748                     );
 749                 }
 750                 break;
 751               case 'closest-side':
 752               case 'contain': // is equivalent to closest-side
 753                 if(m2[0] === 'circle'){
 754                   gradient.rx = gradient.ry = Math.min(
 755                     gradient.cx,
 756                     gradient.cy,
 757                     gradient.x1 - gradient.cx,
 758                     gradient.y1 - gradient.cy
 759                     );
 760                 } else { // ellipse
 761
 762                   gradient.type = m2[0];
 763
 764                   gradient.rx = Math.min(
 765                     gradient.cx,
 766                     gradient.x1 - gradient.cx
 767                     );
 768                   gradient.ry = Math.min(
 769                     gradient.cy,
 770                     gradient.y1 - gradient.cy
 771                     );
 772                 }
 773                 break;
 774
 775             // TODO: add support for "30px 40px" sizes (webkit only)
 776             }
 777           }
 778
 779           // color stops
 780           m2 = m1[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);
 781           if(m2){
 782             m2Len = m2.length;
 783             step = 1 / Math.max(m2Len - 1, 1);
 784             for(i = 0; i < m2Len; i+=1){
 785               m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);
 786               if(m3[2]){
 787                 stop = parseFloat(m3[2]);
 788                 if(m3[3] === '%'){
 789                   stop /= 100;
 790                 } else { // px - stupid opera
 791                   stop /= bounds.width;
 792                 }
 793               } else {
 794                 stop = i * step;
 795               }
 796               gradient.colorStops.push({
 797                 color: m3[1],
 798                 stop: stop
 799               });
 800             }
 801           }
 802           break;
 803       }
 804     }
 805
 806     return gradient;
 807   };
 808
 809   function addScrollStops(grad) {
 810     return function(colorStop) {
 811       try {
 812         grad.addColorStop(colorStop.stop, colorStop.color);
 813       }
 814       catch(e) {
 815         Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]);
 816       }
 817     };
 818   }
 819
 820   Generate.Gradient = function(src, bounds) {
 821     if(bounds.width === 0 || bounds.height === 0) {
 822       return;
 823     }
 824
 825     var canvas = document.createElement('canvas'),
 826     ctx = canvas.getContext('2d'),
 827     gradient, grad;
 828
 829     canvas.width = bounds.width;
 830     canvas.height = bounds.height;
 831
 832     // TODO: add support for multi defined background gradients
 833     gradient = _html2canvas.Generate.parseGradient(src, bounds);
 834
 835     if(gradient) {
 836       switch(gradient.type) {
 837         case 'linear':
 838           grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);
 839           gradient.colorStops.forEach(addScrollStops(grad));
 840           ctx.fillStyle = grad;
 841           ctx.fillRect(0, 0, bounds.width, bounds.height);
 842           break;
 843
 844         case 'circle':
 845           grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);
 846           gradient.colorStops.forEach(addScrollStops(grad));
 847           ctx.fillStyle = grad;
 848           ctx.fillRect(0, 0, bounds.width, bounds.height);
 849           break;
 850
 851         case 'ellipse':
 852           var canvasRadial = document.createElement('canvas'),
 853             ctxRadial = canvasRadial.getContext('2d'),
 854             ri = Math.max(gradient.rx, gradient.ry),
 855             di = ri * 2;
 856
 857           canvasRadial.width = canvasRadial.height = di;
 858
 859           grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);
 860           gradient.colorStops.forEach(addScrollStops(grad));
 861
 862           ctxRadial.fillStyle = grad;
 863           ctxRadial.fillRect(0, 0, di, di);
 864
 865           ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color;
 866           ctx.fillRect(0, 0, canvas.width, canvas.height);
 867           ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);
 868           break;
 869       }
 870     }
 871
 872     return canvas;
 873   };
 874
 875   Generate.ListAlpha = function(number) {
 876     var tmp = "",
 877     modulus;
 878
 879     do {
 880       modulus = number % 26;
 881       tmp = String.fromCharCode((modulus) + 64) + tmp;
 882       number = number / 26;
 883     }while((number*26) > 26);
 884
 885     return tmp;
 886   };
 887
 888   Generate.ListRoman = function(number) {
 889     var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],
 890     decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
 891     roman = "",
 892     v,
 893     len = romanArray.length;
 894
 895     if (number <= 0 || number >= 4000) {
 896       return number;
 897     }
 898
 899     for (v=0; v < len; v+=1) {
 900       while (number >= decimal[v]) {
 901         number -= decimal[v];
 902         roman += romanArray[v];
 903       }
 904     }
 905
 906     return roman;
 907   };
 908 })();
 909 function h2cRenderContext(width, height) {
 910   var storage = [];
 911   return {
 912     storage: storage,
 913     width: width,
 914     height: height,
 915     clip: function() {
 916       storage.push({
 917         type: "function",
 918         name: "clip",
 919         'arguments': arguments
 920       });
 921     },
 922     translate: function() {
 923       storage.push({
 924         type: "function",
 925         name: "translate",
 926         'arguments': arguments
 927       });
 928     },
 929     fill: function() {
 930       storage.push({
 931         type: "function",
 932         name: "fill",
 933         'arguments': arguments
 934       });
 935     },
 936     save: function() {
 937       storage.push({
 938         type: "function",
 939         name: "save",
 940         'arguments': arguments
 941       });
 942     },
 943     restore: function() {
 944       storage.push({
 945         type: "function",
 946         name: "restore",
 947         'arguments': arguments
 948       });
 949     },
 950     fillRect: function () {
 951       storage.push({
 952         type: "function",
 953         name: "fillRect",
 954         'arguments': arguments
 955       });
 956     },
 957     createPattern: function() {
 958       storage.push({
 959         type: "function",
 960         name: "createPattern",
 961         'arguments': arguments
 962       });
 963     },
 964     drawShape: function() {
 965
 966       var shape = [];
 967
 968       storage.push({
 969         type: "function",
 970         name: "drawShape",
 971         'arguments': shape
 972       });
 973
 974       return {
 975         moveTo: function() {
 976           shape.push({
 977             name: "moveTo",
 978             'arguments': arguments
 979           });
 980         },
 981         lineTo: function() {
 982           shape.push({
 983             name: "lineTo",
 984             'arguments': arguments
 985           });
 986         },
 987         arcTo: function() {
 988           shape.push({
 989             name: "arcTo",
 990             'arguments': arguments
 991           });
 992         },
 993         bezierCurveTo: function() {
 994           shape.push({
 995             name: "bezierCurveTo",
 996             'arguments': arguments
 997           });
 998         },
 999         quadraticCurveTo: function() {
1000           shape.push({
1001             name: "quadraticCurveTo",
1002             'arguments': arguments
1003           });
1004         }
1005       };
1006
1007     },
1008     drawImage: function () {
1009       storage.push({
1010         type: "function",
1011         name: "drawImage",
1012         'arguments': arguments
1013       });
1014     },
1015     fillText: function () {
1016       storage.push({
1017         type: "function",
1018         name: "fillText",
1019         'arguments': arguments
1020       });
1021     },
1022     setVariable: function (variable, value) {
1023       storage.push({
1024         type: "variable",
1025         name: variable,
1026         'arguments': value
1027       });
1028       return value;
1029     }
1030   };
1031 }
1032 _html2canvas.Parse = function (images, options) {
1033   window.scroll(0,0);
1034
1035   var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default
1036   numDraws = 0,
1037   doc = element.ownerDocument,
1038   Util = _html2canvas.Util,
1039   support = Util.Support(options, doc),
1040   ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
1041   body = doc.body,
1042   getCSS = Util.getCSS,
1043   pseudoHide = "___html2canvas___pseudoelement",
1044   hidePseudoElements = doc.createElement('style');
1045
1046   hidePseudoElements.innerHTML = '.' + pseudoHide + '-before:before { content: "" !important; display: none !important; }' +
1047   '.' + pseudoHide + '-after:after { content: "" !important; display: none !important; }';
1048
1049   body.appendChild(hidePseudoElements);
1050
1051   images = images || {};
1052
1053   function documentWidth () {
1054     return Math.max(
1055       Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),
1056       Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),
1057       Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
1058       );
1059   }
1060
1061   function documentHeight () {
1062     return Math.max(
1063       Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),
1064       Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),
1065       Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
1066       );
1067   }
1068
1069   function getCSSInt(element, attribute) {
1070     var val = parseInt(getCSS(element, attribute), 10);
1071     return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html
1072   }
1073
1074   function renderRect (ctx, x, y, w, h, bgcolor) {
1075     if (bgcolor !== "transparent"){
1076       ctx.setVariable("fillStyle", bgcolor);
1077       ctx.fillRect(x, y, w, h);
1078       numDraws+=1;
1079     }
1080   }
1081
1082   function capitalize(m, p1, p2) {
1083     if (m.length > 0) {
1084       return p1 + p2.toUpperCase();
1085     }
1086   }
1087
1088   function textTransform (text, transform) {
1089     switch(transform){
1090       case "lowercase":
1091         return text.toLowerCase();
1092       case "capitalize":
1093         return text.replace( /(^|\s|:|-|\(|\))([a-z])/g, capitalize);
1094       case "uppercase":
1095         return text.toUpperCase();
1096       default:
1097         return text;
1098     }
1099   }
1100
1101   function noLetterSpacing(letter_spacing) {
1102     return (/^(normal|none|0px)$/.test(letter_spacing));
1103   }
1104
1105   function drawText(currentText, x, y, ctx){
1106     if (currentText !== null && Util.trimText(currentText).length > 0) {
1107       ctx.fillText(currentText, x, y);
1108       numDraws+=1;
1109     }
1110   }
1111
1112   function setTextVariables(ctx, el, text_decoration, color) {
1113     var align = false,
1114     bold = getCSS(el, "fontWeight"),
1115     family = getCSS(el, "fontFamily"),
1116     size = getCSS(el, "fontSize"),
1117     shadows = Util.parseTextShadows(getCSS(el, "textShadow"));
1118
1119     switch(parseInt(bold, 10)){
1120       case 401:
1121         bold = "bold";
1122         break;
1123       case 400:
1124         bold = "normal";
1125         break;
1126     }
1127
1128     ctx.setVariable("fillStyle", color);
1129     ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));
1130     ctx.setVariable("textAlign", (align) ? "right" : "left");
1131
1132     if (shadows.length) {
1133       // TODO: support multiple text shadows
1134       // apply the first text shadow
1135       ctx.setVariable("shadowColor", shadows[0].color);
1136       ctx.setVariable("shadowOffsetX", shadows[0].offsetX);
1137       ctx.setVariable("shadowOffsetY", shadows[0].offsetY);
1138       ctx.setVariable("shadowBlur", shadows[0].blur);
1139     }
1140
1141     if (text_decoration !== "none"){
1142       return Util.Font(family, size, doc);
1143     }
1144   }
1145
1146   function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) {
1147     switch(text_decoration) {
1148       case "underline":
1149         // Draws a line at the baseline of the font
1150         // TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size
1151         renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color);
1152         break;
1153       case "overline":
1154         renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color);
1155         break;
1156       case "line-through":
1157         // TODO try and find exact position for line-through
1158         renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color);
1159         break;
1160     }
1161   }
1162
1163   function getTextBounds(state, text, textDecoration, isLast, transform) {
1164     var bounds;
1165     if (support.rangeBounds && !transform) {
1166       if (textDecoration !== "none" || Util.trimText(text).length !== 0) {
1167         bounds = textRangeBounds(text, state.node, state.textOffset);
1168       }
1169       state.textOffset += text.length;
1170     } else if (state.node && typeof state.node.nodeValue === "string" ){
1171       var newTextNode = (isLast) ? state.node.splitText(text.length) : null;
1172       bounds = textWrapperBounds(state.node, transform);
1173       state.node = newTextNode;
1174     }
1175     return bounds;
1176   }
1177
1178   function textRangeBounds(text, textNode, textOffset) {
1179     var range = doc.createRange();
1180     range.setStart(textNode, textOffset);
1181     range.setEnd(textNode, textOffset + text.length);
1182     return range.getBoundingClientRect();
1183   }
1184
1185   function textWrapperBounds(oldTextNode, transform) {
1186     var parent = oldTextNode.parentNode,
1187     wrapElement = doc.createElement('wrapper'),
1188     backupText = oldTextNode.cloneNode(true);
1189
1190     wrapElement.appendChild(oldTextNode.cloneNode(true));
1191     parent.replaceChild(wrapElement, oldTextNode);
1192
1193     var bounds = transform ? Util.OffsetBounds(wrapElement) : Util.Bounds(wrapElement);
1194     parent.replaceChild(backupText, wrapElement);
1195     return bounds;
1196   }
1197
1198   function renderText(el, textNode, stack) {
1199     var ctx = stack.ctx,
1200     color = getCSS(el, "color"),
1201     textDecoration = getCSS(el, "textDecoration"),
1202     textAlign = getCSS(el, "textAlign"),
1203     metrics,
1204     textList,
1205     state = {
1206       node: textNode,
1207       textOffset: 0
1208     };
1209
1210     if (Util.trimText(textNode.nodeValue).length > 0) {
1211       textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));
1212       textAlign = textAlign.replace(["-webkit-auto"],["auto"]);
1213
1214       textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?
1215       textNode.nodeValue.split(/(\b| )/)
1216       : textNode.nodeValue.split("");
1217
1218       metrics = setTextVariables(ctx, el, textDecoration, color);
1219
1220       if (options.chinese) {
1221         textList.forEach(function(word, index) {
1222           if (/.*[\u4E00-\u9FA5].*$/.test(word)) {
1223             word = word.split("");
1224             word.unshift(index, 1);
1225             textList.splice.apply(textList, word);
1226           }
1227         });
1228       }
1229
1230       textList.forEach(function(text, index) {
1231         var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);
1232         if (bounds) {
1233           drawText(text, bounds.left, bounds.bottom, ctx);
1234           renderTextDecoration(ctx, textDecoration, bounds, metrics, color);
1235         }
1236       });
1237     }
1238   }
1239
1240   function listPosition (element, val) {
1241     var boundElement = doc.createElement( "boundelement" ),
1242     originalType,
1243     bounds;
1244
1245     boundElement.style.display = "inline";
1246
1247     originalType = element.style.listStyleType;
1248     element.style.listStyleType = "none";
1249
1250     boundElement.appendChild(doc.createTextNode(val));
1251
1252     element.insertBefore(boundElement, element.firstChild);
1253
1254     bounds = Util.Bounds(boundElement);
1255     element.removeChild(boundElement);
1256     element.style.listStyleType = originalType;
1257     return bounds;
1258   }
1259
1260   function elementIndex(el) {
1261     var i = -1,
1262     count = 1,
1263     childs = el.parentNode.childNodes;
1264
1265     if (el.parentNode) {
1266       while(childs[++i] !== el) {
1267         if (childs[i].nodeType === 1) {
1268           count++;
1269         }
1270       }
1271       return count;
1272     } else {
1273       return -1;
1274     }
1275   }
1276
1277   function listItemText(element, type) {
1278     var currentIndex = elementIndex(element), text;
1279     switch(type){
1280       case "decimal":
1281         text = currentIndex;
1282         break;
1283       case "decimal-leading-zero":
1284         text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString();
1285         break;
1286       case "upper-roman":
1287         text = _html2canvas.Generate.ListRoman( currentIndex );
1288         break;
1289       case "lower-roman":
1290         text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();
1291         break;
1292       case "lower-alpha":
1293         text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();
1294         break;
1295       case "upper-alpha":
1296         text = _html2canvas.Generate.ListAlpha( currentIndex );
1297         break;
1298     }
1299
1300     return text + ". ";
1301   }
1302
1303   function renderListItem(element, stack, elBounds) {
1304     var x,
1305     text,
1306     ctx = stack.ctx,
1307     type = getCSS(element, "listStyleType"),
1308     listBounds;
1309
1310     if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {
1311       text = listItemText(element, type);
1312       listBounds = listPosition(element, text);
1313       setTextVariables(ctx, element, "none", getCSS(element, "color"));
1314
1315       if (getCSS(element, "listStylePosition") === "inside") {
1316         ctx.setVariable("textAlign", "left");
1317         x = elBounds.left;
1318       } else {
1319         return;
1320       }
1321
1322       drawText(text, x, listBounds.bottom, ctx);
1323     }
1324   }
1325
1326   function loadImage (src){
1327     var img = images[src];
1328     return (img && img.succeeded === true) ? img.img : false;
1329   }
1330
1331   function clipBounds(src, dst){
1332     var x = Math.max(src.left, dst.left),
1333     y = Math.max(src.top, dst.top),
1334     x2 = Math.min((src.left + src.width), (dst.left + dst.width)),
1335     y2 = Math.min((src.top + src.height), (dst.top + dst.height));
1336
1337     return {
1338       left:x,
1339       top:y,
1340       width:x2-x,
1341       height:y2-y
1342     };
1343   }
1344
1345   function setZ(element, stack, parentStack){
1346     var newContext,
1347     isPositioned = stack.cssPosition !== 'static',
1348     zIndex = isPositioned ? getCSS(element, 'zIndex') : 'auto',
1349     opacity = getCSS(element, 'opacity'),
1350     isFloated = getCSS(element, 'cssFloat') !== 'none';
1351
1352     // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
1353     // When a new stacking context should be created:
1354     // the root element (HTML),
1355     // positioned (absolutely or relatively) with a z-index value other than "auto",
1356     // elements with an opacity value less than 1. (See the specification for opacity),
1357     // on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
1358
1359     stack.zIndex = newContext = h2czContext(zIndex);
1360     newContext.isPositioned = isPositioned;
1361     newContext.isFloated = isFloated;
1362     newContext.opacity = opacity;
1363     newContext.ownStacking = (zIndex !== 'auto' || opacity < 1);
1364
1365     if (parentStack) {
1366       parentStack.zIndex.children.push(stack);
1367     }
1368   }
1369
1370   function renderImage(ctx, element, image, bounds, borders) {
1371
1372     var paddingLeft = getCSSInt(element, 'paddingLeft'),
1373     paddingTop = getCSSInt(element, 'paddingTop'),
1374     paddingRight = getCSSInt(element, 'paddingRight'),
1375     paddingBottom = getCSSInt(element, 'paddingBottom');
1376
1377     drawImage(
1378       ctx,
1379       image,
1380       0, //sx
1381       0, //sy
1382       image.width, //sw
1383       image.height, //sh
1384       bounds.left + paddingLeft + borders[3].width, //dx
1385       bounds.top + paddingTop + borders[0].width, // dy
1386       bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw
1387       bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh
1388       );
1389   }
1390
1391   function getBorderData(element) {
1392     return ["Top", "Right", "Bottom", "Left"].map(function(side) {
1393       return {
1394         width: getCSSInt(element, 'border' + side + 'Width'),
1395         color: getCSS(element, 'border' + side + 'Color')
1396       };
1397     });
1398   }
1399
1400   function getBorderRadiusData(element) {
1401     return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {
1402       return getCSS(element, 'border' + side + 'Radius');
1403     });
1404   }
1405
1406   var getCurvePoints = (function(kappa) {
1407
1408     return function(x, y, r1, r2) {
1409       var ox = (r1) * kappa, // control point offset horizontal
1410       oy = (r2) * kappa, // control point offset vertical
1411       xm = x + r1, // x-middle
1412       ym = y + r2; // y-middle
1413       return {
1414         topLeft: bezierCurve({
1415           x:x,
1416           y:ym
1417         }, {
1418           x:x,
1419           y:ym - oy
1420         }, {
1421           x:xm - ox,
1422           y:y
1423         }, {
1424           x:xm,
1425           y:y
1426         }),
1427         topRight: bezierCurve({
1428           x:x,
1429           y:y
1430         }, {
1431           x:x + ox,
1432           y:y
1433         }, {
1434           x:xm,
1435           y:ym - oy
1436         }, {
1437           x:xm,
1438           y:ym
1439         }),
1440         bottomRight: bezierCurve({
1441           x:xm,
1442           y:y
1443         }, {
1444           x:xm,
1445           y:y + oy
1446         }, {
1447           x:x + ox,
1448           y:ym
1449         }, {
1450           x:x,
1451           y:ym
1452         }),
1453         bottomLeft: bezierCurve({
1454           x:xm,
1455           y:ym
1456         }, {
1457           x:xm - ox,
1458           y:ym
1459         }, {
1460           x:x,
1461           y:y + oy
1462         }, {
1463           x:x,
1464           y:y
1465         })
1466       };
1467     };
1468   })(4 * ((Math.sqrt(2) - 1) / 3));
1469
1470   function bezierCurve(start, startControl, endControl, end) {
1471
1472     var lerp = function (a, b, t) {
1473       return {
1474         x:a.x + (b.x - a.x) * t,
1475         y:a.y + (b.y - a.y) * t
1476       };
1477     };
1478
1479     return {
1480       start: start,
1481       startControl: startControl,
1482       endControl: endControl,
1483       end: end,
1484       subdivide: function(t) {
1485         var ab = lerp(start, startControl, t),
1486         bc = lerp(startControl, endControl, t),
1487         cd = lerp(endControl, end, t),
1488         abbc = lerp(ab, bc, t),
1489         bccd = lerp(bc, cd, t),
1490         dest = lerp(abbc, bccd, t);
1491         return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];
1492       },
1493       curveTo: function(borderArgs) {
1494         borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);
1495       },
1496       curveToReversed: function(borderArgs) {
1497         borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);
1498       }
1499     };
1500   }
1501
1502   function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {
1503     if (radius1[0] > 0 || radius1[1] > 0) {
1504       borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);
1505       corner1[0].curveTo(borderArgs);
1506       corner1[1].curveTo(borderArgs);
1507     } else {
1508       borderArgs.push(["line", x, y]);
1509     }
1510
1511     if (radius2[0] > 0 || radius2[1] > 0) {
1512       borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);
1513     }
1514   }
1515
1516   function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {
1517     var borderArgs = [];
1518
1519     if (radius1[0] > 0 || radius1[1] > 0) {
1520       borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);
1521       outer1[1].curveTo(borderArgs);
1522     } else {
1523       borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);
1524     }
1525
1526     if (radius2[0] > 0 || radius2[1] > 0) {
1527       borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);
1528       outer2[0].curveTo(borderArgs);
1529       borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);
1530       inner2[0].curveToReversed(borderArgs);
1531     } else {
1532       borderArgs.push([ "line", borderData.c2[0], borderData.c2[1]]);
1533       borderArgs.push([ "line", borderData.c3[0], borderData.c3[1]]);
1534     }
1535
1536     if (radius1[0] > 0 || radius1[1] > 0) {
1537       borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);
1538       inner1[1].curveToReversed(borderArgs);
1539     } else {
1540       borderArgs.push([ "line", borderData.c4[0], borderData.c4[1]]);
1541     }
1542
1543     return borderArgs;
1544   }
1545
1546   function calculateCurvePoints(bounds, borderRadius, borders) {
1547
1548     var x = bounds.left,
1549     y = bounds.top,
1550     width = bounds.width,
1551     height = bounds.height,
1552
1553     tlh = borderRadius[0][0],
1554     tlv = borderRadius[0][1],
1555     trh = borderRadius[1][0],
1556     trv = borderRadius[1][1],
1557     brh = borderRadius[2][0],
1558     brv = borderRadius[2][1],
1559     blh = borderRadius[3][0],
1560     blv = borderRadius[3][1],
1561
1562     topWidth = width - trh,
1563     rightHeight = height - brv,
1564     bottomWidth = width - brh,
1565     leftHeight = height - blv;
1566
1567     return {
1568       topLeftOuter: getCurvePoints(
1569         x,
1570         y,
1571         tlh,
1572         tlv
1573         ).topLeft.subdivide(0.5),
1574
1575       topLeftInner: getCurvePoints(
1576         x + borders[3].width,
1577         y + borders[0].width,
1578         Math.max(0, tlh - borders[3].width),
1579         Math.max(0, tlv - borders[0].width)
1580         ).topLeft.subdivide(0.5),
1581
1582       topRightOuter: getCurvePoints(
1583         x + topWidth,
1584         y,
1585         trh,
1586         trv
1587         ).topRight.subdivide(0.5),
1588
1589       topRightInner: getCurvePoints(
1590         x + Math.min(topWidth, width + borders[3].width),
1591         y + borders[0].width,
1592         (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width,
1593         trv - borders[0].width
1594         ).topRight.subdivide(0.5),
1595
1596       bottomRightOuter: getCurvePoints(
1597         x + bottomWidth,
1598         y + rightHeight,
1599         brh,
1600         brv
1601         ).bottomRight.subdivide(0.5),
1602
1603       bottomRightInner: getCurvePoints(
1604         x + Math.min(bottomWidth, width + borders[3].width),
1605         y + Math.min(rightHeight, height + borders[0].width),
1606         Math.max(0, brh - borders[1].width),
1607         Math.max(0, brv - borders[2].width)
1608         ).bottomRight.subdivide(0.5),
1609
1610       bottomLeftOuter: getCurvePoints(
1611         x,
1612         y + leftHeight,
1613         blh,
1614         blv
1615         ).bottomLeft.subdivide(0.5),
1616
1617       bottomLeftInner: getCurvePoints(
1618         x + borders[3].width,
1619         y + leftHeight,
1620         Math.max(0, blh - borders[3].width),
1621         Math.max(0, blv - borders[2].width)
1622         ).bottomLeft.subdivide(0.5)
1623     };
1624   }
1625
1626   function getBorderClip(element, borderPoints, borders, radius, bounds) {
1627     var backgroundClip = getCSS(element, 'backgroundClip'),
1628     borderArgs = [];
1629
1630     switch(backgroundClip) {
1631       case "content-box":
1632       case "padding-box":
1633         parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);
1634         parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);
1635         parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);
1636         parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);
1637         break;
1638
1639       default:
1640         parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);
1641         parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);
1642         parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);
1643         parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);
1644         break;
1645     }
1646
1647     return borderArgs;
1648   }
1649
1650   function parseBorders(element, bounds, borders){
1651     var x = bounds.left,
1652     y = bounds.top,
1653     width = bounds.width,
1654     height = bounds.height,
1655     borderSide,
1656     bx,
1657     by,
1658     bw,
1659     bh,
1660     borderArgs,
1661     // http://www.w3.org/TR/css3-background/#the-border-radius
1662     borderRadius = getBorderRadiusData(element),
1663     borderPoints = calculateCurvePoints(bounds, borderRadius, borders),
1664     borderData = {
1665       clip: getBorderClip(element, borderPoints, borders, borderRadius, bounds),
1666       borders: []
1667     };
1668
1669     for (borderSide = 0; borderSide < 4; borderSide++) {
1670
1671       if (borders[borderSide].width > 0) {
1672         bx = x;
1673         by = y;
1674         bw = width;
1675         bh = height - (borders[2].width);
1676
1677         switch(borderSide) {
1678           case 0:
1679             // top border
1680             bh = borders[0].width;
1681
1682             borderArgs = drawSide({
1683               c1: [bx, by],
1684               c2: [bx + bw, by],
1685               c3: [bx + bw - borders[1].width, by + bh],
1686               c4: [bx + borders[3].width, by + bh]
1687             }, borderRadius[0], borderRadius[1],
1688             borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);
1689             break;
1690           case 1:
1691             // right border
1692             bx = x + width - (borders[1].width);
1693             bw = borders[1].width;
1694
1695             borderArgs = drawSide({
1696               c1: [bx + bw, by],
1697               c2: [bx + bw, by + bh + borders[2].width],
1698               c3: [bx, by + bh],
1699               c4: [bx, by + borders[0].width]
1700             }, borderRadius[1], borderRadius[2],
1701             borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);
1702             break;
1703           case 2:
1704             // bottom border
1705             by = (by + height) - (borders[2].width);
1706             bh = borders[2].width;
1707
1708             borderArgs = drawSide({
1709               c1: [bx + bw, by + bh],
1710               c2: [bx, by + bh],
1711               c3: [bx + borders[3].width, by],
1712               c4: [bx + bw - borders[3].width, by]
1713             }, borderRadius[2], borderRadius[3],
1714             borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);
1715             break;
1716           case 3:
1717             // left border
1718             bw = borders[3].width;
1719
1720             borderArgs = drawSide({
1721               c1: [bx, by + bh + borders[2].width],
1722               c2: [bx, by],
1723               c3: [bx + bw, by + borders[0].width],
1724               c4: [bx + bw, by + bh]
1725             }, borderRadius[3], borderRadius[0],
1726             borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);
1727             break;
1728         }
1729
1730         borderData.borders.push({
1731           args: borderArgs,
1732           color: borders[borderSide].color
1733         });
1734
1735       }
1736     }
1737
1738     return borderData;
1739   }
1740
1741   function createShape(ctx, args) {
1742     var shape = ctx.drawShape();
1743     args.forEach(function(border, index) {
1744       shape[(index === 0) ? "moveTo" : border[0] + "To" ].apply(null, border.slice(1));
1745     });
1746     return shape;
1747   }
1748
1749   function renderBorders(ctx, borderArgs, color) {
1750     if (color !== "transparent") {
1751       ctx.setVariable( "fillStyle", color);
1752       createShape(ctx, borderArgs);
1753       ctx.fill();
1754       numDraws+=1;
1755     }
1756   }
1757
1758   function renderFormValue (el, bounds, stack){
1759
1760     var valueWrap = doc.createElement('valuewrap'),
1761     cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],
1762     textValue,
1763     textNode;
1764
1765     cssPropertyArray.forEach(function(property) {
1766       try {
1767         valueWrap.style[property] = getCSS(el, property);
1768       } catch(e) {
1769         // Older IE has issues with "border"
1770         Util.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);
1771       }
1772     });
1773
1774     valueWrap.style.borderColor = "black";
1775     valueWrap.style.borderStyle = "solid";
1776     valueWrap.style.display = "block";
1777     valueWrap.style.position = "absolute";
1778
1779     if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){
1780       valueWrap.style.lineHeight = getCSS(el, "height");
1781     }
1782
1783     valueWrap.style.top = bounds.top + "px";
1784     valueWrap.style.left = bounds.left + "px";
1785
1786     textValue = (el.nodeName === "SELECT") ? (el.options[el.selectedIndex] || 0).text : el.value;
1787     if(!textValue) {
1788       textValue = el.placeholder;
1789     }
1790
1791     textNode = doc.createTextNode(textValue);
1792
1793     valueWrap.appendChild(textNode);
1794     body.appendChild(valueWrap);
1795
1796     renderText(el, textNode, stack);
1797     body.removeChild(valueWrap);
1798   }
1799
1800   function drawImage (ctx) {
1801     ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1));
1802     numDraws+=1;
1803   }
1804
1805   function getPseudoElement(el, which) {
1806     var elStyle = window.getComputedStyle(el, which);
1807     if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || elStyle.display === "none") {
1808       return;
1809     }
1810     var content = elStyle.content + '',
1811     first = content.substr( 0, 1 );
1812     //strips quotes
1813     if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) {
1814       content = content.substr( 1, content.length - 2 );
1815     }
1816
1817     var isImage = content.substr( 0, 3 ) === 'url',
1818     elps = document.createElement( isImage ? 'img' : 'span' );
1819
1820     elps.className = pseudoHide + "-before " + pseudoHide + "-after";
1821
1822     Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {
1823       // Prevent assigning of read only CSS Rules, ex. length, parentRule
1824       try {
1825         elps.style[prop] = elStyle[prop];
1826       } catch (e) {
1827         Util.log(['Tried to assign readonly property ', prop, 'Error:', e]);
1828       }
1829     });
1830
1831     if(isImage) {
1832       elps.src = Util.parseBackgroundImage(content)[0].args[0];
1833     } else {
1834       elps.innerHTML = content;
1835     }
1836     return elps;
1837   }
1838
1839   function indexedProperty(property) {
1840     return (isNaN(window.parseInt(property, 10)));
1841   }
1842
1843   function injectPseudoElements(el, stack) {
1844     var before = getPseudoElement(el, ':before'),
1845     after = getPseudoElement(el, ':after');
1846     if(!before && !after) {
1847       return;
1848     }
1849
1850     if(before) {
1851       el.className += " " + pseudoHide + "-before";
1852       el.parentNode.insertBefore(before, el);
1853       parseElement(before, stack, true);
1854       el.parentNode.removeChild(before);
1855       el.className = el.className.replace(pseudoHide + "-before", "").trim();
1856     }
1857
1858     if (after) {
1859       el.className += " " + pseudoHide + "-after";
1860       el.appendChild(after);
1861       parseElement(after, stack, true);
1862       el.removeChild(after);
1863       el.className = el.className.replace(pseudoHide + "-after", "").trim();
1864     }
1865
1866   }
1867
1868   function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) {
1869     var offsetX = Math.round(bounds.left + backgroundPosition.left),
1870     offsetY = Math.round(bounds.top + backgroundPosition.top);
1871
1872     ctx.createPattern(image);
1873     ctx.translate(offsetX, offsetY);
1874     ctx.fill();
1875     ctx.translate(-offsetX, -offsetY);
1876   }
1877
1878   function backgroundRepeatShape(ctx, image, backgroundPosition, bounds, left, top, width, height) {
1879     var args = [];
1880     args.push(["line", Math.round(left), Math.round(top)]);
1881     args.push(["line", Math.round(left + width), Math.round(top)]);
1882     args.push(["line", Math.round(left + width), Math.round(height + top)]);
1883     args.push(["line", Math.round(left), Math.round(height + top)]);
1884     createShape(ctx, args);
1885     ctx.save();
1886     ctx.clip();
1887     renderBackgroundRepeat(ctx, image, backgroundPosition, bounds);
1888     ctx.restore();
1889   }
1890
1891   function renderBackgroundColor(ctx, backgroundBounds, bgcolor) {
1892     renderRect(
1893       ctx,
1894       backgroundBounds.left,
1895       backgroundBounds.top,
1896       backgroundBounds.width,
1897       backgroundBounds.height,
1898       bgcolor
1899       );
1900   }
1901
1902   function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
1903     var backgroundSize = Util.BackgroundSize(el, bounds, image, imageIndex),
1904     backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
1905     backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(Util.trimText);
1906
1907     image = resizeImage(image, backgroundSize);
1908
1909     backgroundRepeat = backgroundRepeat[imageIndex] || backgroundRepeat[0];
1910
1911     switch (backgroundRepeat) {
1912       case "repeat-x":
1913         backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
1914           bounds.left, bounds.top + backgroundPosition.top, 99999, image.height);
1915         break;
1916
1917       case "repeat-y":
1918         backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
1919           bounds.left + backgroundPosition.left, bounds.top, image.width, 99999);
1920         break;
1921
1922       case "no-repeat":
1923         backgroundRepeatShape(ctx, image, backgroundPosition, bounds,
1924           bounds.left + backgroundPosition.left, bounds.top + backgroundPosition.top, image.width, image.height);
1925         break;
1926
1927       default:
1928         renderBackgroundRepeat(ctx, image, backgroundPosition, {
1929           top: bounds.top,
1930           left: bounds.left,
1931           width: image.width,
1932           height: image.height
1933         });
1934         break;
1935     }
1936   }
1937
1938   function renderBackgroundImage(element, bounds, ctx) {
1939     var backgroundImage = getCSS(element, "backgroundImage"),
1940     backgroundImages = Util.parseBackgroundImage(backgroundImage),
1941     image,
1942     imageIndex = backgroundImages.length;
1943
1944     while(imageIndex--) {
1945       backgroundImage = backgroundImages[imageIndex];
1946
1947       if (!backgroundImage.args || backgroundImage.args.length === 0) {
1948         continue;
1949       }
1950
1951       var key = backgroundImage.method === 'url' ?
1952       backgroundImage.args[0] :
1953       backgroundImage.value;
1954
1955       image = loadImage(key);
1956
1957       // TODO add support for background-origin
1958       if (image) {
1959         renderBackgroundRepeating(element, bounds, ctx, image, imageIndex);
1960       } else {
1961         Util.log("html2canvas: Error loading background:", backgroundImage);
1962       }
1963     }
1964   }
1965
1966   function resizeImage(image, bounds) {
1967     if(image.width === bounds.width && image.height === bounds.height) {
1968       return image;
1969     }
1970
1971     var ctx, canvas = doc.createElement('canvas');
1972     canvas.width = bounds.width;
1973     canvas.height = bounds.height;
1974     ctx = canvas.getContext("2d");
1975     drawImage(ctx, image, 0, 0, image.width, image.height, 0, 0, bounds.width, bounds.height );
1976     return canvas;
1977   }
1978
1979   function setOpacity(ctx, element, parentStack) {
1980     return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1));
1981   }
1982
1983   function removePx(str) {
1984     return str.replace("px", "");
1985   }
1986
1987   var transformRegExp = /(matrix)\((.+)\)/;
1988
1989   function getTransform(element, parentStack) {
1990     var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform");
1991     var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin") || "0px 0px";
1992
1993     transformOrigin = transformOrigin.split(" ").map(removePx).map(Util.asFloat);
1994
1995     var matrix;
1996     if (transform && transform !== "none") {
1997       var match = transform.match(transformRegExp);
1998       if (match) {
1999         switch(match[1]) {
2000           case "matrix":
2001             matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat);
2002             break;
2003         }
2004       }
2005     }
2006
2007     return {
2008       origin: transformOrigin,
2009       matrix: matrix
2010     };
2011   }
2012
2013   function createStack(element, parentStack, bounds, transform) {
2014     var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),
2015     stack = {
2016       ctx: ctx,
2017       opacity: setOpacity(ctx, element, parentStack),
2018       cssPosition: getCSS(element, "position"),
2019       borders: getBorderData(element),
2020       transform: transform,
2021       clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null
2022     };
2023
2024     setZ(element, stack, parentStack);
2025
2026     // TODO correct overflow for absolute content residing under a static position
2027     if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){
2028       stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds;
2029     }
2030
2031     return stack;
2032   }
2033
2034   function getBackgroundBounds(borders, bounds, clip) {
2035     var backgroundBounds = {
2036       left: bounds.left + borders[3].width,
2037       top: bounds.top + borders[0].width,
2038       width: bounds.width - (borders[1].width + borders[3].width),
2039       height: bounds.height - (borders[0].width + borders[2].width)
2040     };
2041
2042     if (clip) {
2043       backgroundBounds = clipBounds(backgroundBounds, clip);
2044     }
2045
2046     return backgroundBounds;
2047   }
2048
2049   function getBounds(element, transform) {
2050     var bounds = (transform.matrix) ? Util.OffsetBounds(element) : Util.Bounds(element);
2051     transform.origin[0] += bounds.left;
2052     transform.origin[1] += bounds.top;
2053     return bounds;
2054   }
2055
2056   function renderElement(element, parentStack, pseudoElement, ignoreBackground) {
2057     var transform = getTransform(element, parentStack),
2058     bounds = getBounds(element, transform),
2059     image,
2060     stack = createStack(element, parentStack, bounds, transform),
2061     borders = stack.borders,
2062     ctx = stack.ctx,
2063     backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip),
2064     borderData = parseBorders(element, bounds, borders),
2065     backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor");
2066
2067
2068     createShape(ctx, borderData.clip);
2069
2070     ctx.save();
2071     ctx.clip();
2072
2073     if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) {
2074       renderBackgroundColor(ctx, bounds, backgroundColor);
2075       renderBackgroundImage(element, backgroundBounds, ctx);
2076     } else if (ignoreBackground) {
2077       stack.backgroundColor =  backgroundColor;
2078     }
2079
2080     ctx.restore();
2081
2082     borderData.borders.forEach(function(border) {
2083       renderBorders(ctx, border.args, border.color);
2084     });
2085
2086     if (!pseudoElement) {
2087       injectPseudoElements(element, stack);
2088     }
2089
2090     switch(element.nodeName){
2091       case "IMG":
2092         if ((image = loadImage(element.getAttribute('src')))) {
2093           renderImage(ctx, element, image, bounds, borders);
2094         } else {
2095           Util.log("html2canvas: Error loading <img>:" + element.getAttribute('src'));
2096         }
2097         break;
2098       case "INPUT":
2099         // TODO add all relevant type's, i.e. HTML5 new stuff
2100         // todo add support for placeholder attribute for browsers which support it
2101         if (/^(text|url|email|submit|button|reset)$/.test(element.type) && (element.value || element.placeholder || "").length > 0){
2102           renderFormValue(element, bounds, stack);
2103         }
2104         break;
2105       case "TEXTAREA":
2106         if ((element.value || element.placeholder || "").length > 0){
2107           renderFormValue(element, bounds, stack);
2108         }
2109         break;
2110       case "SELECT":
2111         if ((element.options||element.placeholder || "").length > 0){
2112           renderFormValue(element, bounds, stack);
2113         }
2114         break;
2115       case "LI":
2116         renderListItem(element, stack, backgroundBounds);
2117         break;
2118       case "CANVAS":
2119         renderImage(ctx, element, element, bounds, borders);
2120         break;
2121     }
2122
2123     return stack;
2124   }
2125
2126   function isElementVisible(element) {
2127     return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
2128   }
2129
2130   function parseElement (element, stack, pseudoElement) {
2131     if (isElementVisible(element)) {
2132       stack = renderElement(element, stack, pseudoElement, false) || stack;
2133       if (!ignoreElementsRegExp.test(element.nodeName)) {
2134         parseChildren(element, stack, pseudoElement);
2135       }
2136     }
2137   }
2138
2139   function parseChildren(element, stack, pseudoElement) {
2140     Util.Children(element).forEach(function(node) {
2141       if (node.nodeType === node.ELEMENT_NODE) {
2142         parseElement(node, stack, pseudoElement);
2143       } else if (node.nodeType === node.TEXT_NODE) {
2144         renderText(element, node, stack);
2145       }
2146     });
2147   }
2148
2149   function init() {
2150     var background = getCSS(document.documentElement, "backgroundColor"),
2151       transparentBackground = (Util.isTransparent(background) && element === document.body),
2152       stack = renderElement(element, null, false, transparentBackground);
2153     parseChildren(element, stack);
2154
2155     if (transparentBackground) {
2156       background = stack.backgroundColor;
2157     }
2158
2159     body.removeChild(hidePseudoElements);
2160     return {
2161       backgroundColor: background,
2162       stack: stack
2163     };
2164   }
2165
2166   return init();
2167 };
2168
2169 function h2czContext(zindex) {
2170   return {
2171     zindex: zindex,
2172     children: []
2173   };
2174 }
2175
2176 _html2canvas.Preload = function( options ) {
2177
2178   var images = {
2179     numLoaded: 0,   // also failed are counted here
2180     numFailed: 0,
2181     numTotal: 0,
2182     cleanupDone: false
2183   },
2184   pageOrigin,
2185   Util = _html2canvas.Util,
2186   methods,
2187   i,
2188   count = 0,
2189   element = options.elements[0] || document.body,
2190   doc = element.ownerDocument,
2191   domImages = element.getElementsByTagName('img'), // Fetch images of the present element only
2192   imgLen = domImages.length,
2193   link = doc.createElement("a"),
2194   supportCORS = (function( img ){
2195     return (img.crossOrigin !== undefined);
2196   })(new Image()),
2197   timeoutTimer;
2198
2199   link.href = window.location.href;
2200   pageOrigin  = link.protocol + link.host;
2201
2202   function isSameOrigin(url){
2203     link.href = url;
2204     link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/
2205     var origin = link.protocol + link.host;
2206     return (origin === pageOrigin);
2207   }
2208
2209   function start(){
2210     Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
2211     if (!images.firstRun && images.numLoaded >= images.numTotal){
2212       Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
2213
2214       if (typeof options.complete === "function"){
2215         options.complete(images);
2216       }
2217
2218     }
2219   }
2220
2221   // TODO modify proxy to serve images with CORS enabled, where available
2222   function proxyGetImage(url, img, imageObj){
2223     var callback_name,
2224     scriptUrl = options.proxy,
2225     script;
2226
2227     link.href = url;
2228     url = link.href; // work around for pages with base href="" set - WARNING: this may change the url
2229
2230     callback_name = 'html2canvas_' + (count++);
2231     imageObj.callbackname = callback_name;
2232
2233     if (scriptUrl.indexOf("?") > -1) {
2234       scriptUrl += "&";
2235     } else {
2236       scriptUrl += "?";
2237     }
2238     scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;
2239     script = doc.createElement("script");
2240
2241     window[callback_name] = function(a){
2242       if (a.substring(0,6) === "error:"){
2243         imageObj.succeeded = false;
2244         images.numLoaded++;
2245         images.numFailed++;
2246         start();
2247       } else {
2248         setImageLoadHandlers(img, imageObj);
2249         img.src = a;
2250       }
2251       window[callback_name] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
2252       try {
2253         delete window[callback_name];  // for all browser that support this
2254       } catch(ex) {}
2255       script.parentNode.removeChild(script);
2256       script = null;
2257       delete imageObj.script;
2258       delete imageObj.callbackname;
2259     };
2260
2261     script.setAttribute("type", "text/javascript");
2262     script.setAttribute("src", scriptUrl);
2263     imageObj.script = script;
2264     window.document.body.appendChild(script);
2265
2266   }
2267
2268   function loadPseudoElement(element, type) {
2269     var style = window.getComputedStyle(element, type),
2270     content = style.content;
2271     if (content.substr(0, 3) === 'url') {
2272       methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]);
2273     }
2274     loadBackgroundImages(style.backgroundImage, element);
2275   }
2276
2277   function loadPseudoElementImages(element) {
2278     loadPseudoElement(element, ":before");
2279     loadPseudoElement(element, ":after");
2280   }
2281
2282   function loadGradientImage(backgroundImage, bounds) {
2283     var img = _html2canvas.Generate.Gradient(backgroundImage, bounds);
2284
2285     if (img !== undefined){
2286       images[backgroundImage] = {
2287         img: img,
2288         succeeded: true
2289       };
2290       images.numTotal++;
2291       images.numLoaded++;
2292       start();
2293     }
2294   }
2295
2296   function invalidBackgrounds(background_image) {
2297     return (background_image && background_image.method && background_image.args && background_image.args.length > 0 );
2298   }
2299
2300   function loadBackgroundImages(background_image, el) {
2301     var bounds;
2302
2303     _html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) {
2304       if (background_image.method === 'url') {
2305         methods.loadImage(background_image.args[0]);
2306       } else if(background_image.method.match(/\-?gradient$/)) {
2307         if(bounds === undefined) {
2308           bounds = _html2canvas.Util.Bounds(el);
2309         }
2310         loadGradientImage(background_image.value, bounds);
2311       }
2312     });
2313   }
2314
2315   function getImages (el) {
2316     var elNodeType = false;
2317
2318     // Firefox fails with permission denied on pages with iframes
2319     try {
2320       Util.Children(el).forEach(getImages);
2321     }
2322     catch( e ) {}
2323
2324     try {
2325       elNodeType = el.nodeType;
2326     } catch (ex) {
2327       elNodeType = false;
2328       Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
2329     }
2330
2331     if (elNodeType === 1 || elNodeType === undefined) {
2332       loadPseudoElementImages(el);
2333       try {
2334         loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el);
2335       } catch(e) {
2336         Util.log("html2canvas: failed to get background-image - Exception: " + e.message);
2337       }
2338       loadBackgroundImages(el);
2339     }
2340   }
2341
2342   function setImageLoadHandlers(img, imageObj) {
2343     img.onload = function() {
2344       if ( imageObj.timer !== undefined ) {
2345         // CORS succeeded
2346         window.clearTimeout( imageObj.timer );
2347       }
2348
2349       images.numLoaded++;
2350       imageObj.succeeded = true;
2351       img.onerror = img.onload = null;
2352       start();
2353     };
2354     img.onerror = function() {
2355       if (img.crossOrigin === "anonymous") {
2356         // CORS failed
2357         window.clearTimeout( imageObj.timer );
2358
2359         // let's try with proxy instead
2360         if ( options.proxy ) {
2361           var src = img.src;
2362           img = new Image();
2363           imageObj.img = img;
2364           img.src = src;
2365
2366           proxyGetImage( img.src, img, imageObj );
2367           return;
2368         }
2369       }
2370
2371       images.numLoaded++;
2372       images.numFailed++;
2373       imageObj.succeeded = false;
2374       img.onerror = img.onload = null;
2375       start();
2376     };
2377   }
2378
2379   methods = {
2380     loadImage: function( src ) {
2381       var img, imageObj;
2382       if ( src && images[src] === undefined ) {
2383         img = new Image();
2384         if ( src.match(/data:image\/.*;base64,/i) ) {
2385           img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');
2386           imageObj = images[src] = {
2387             img: img
2388           };
2389           images.numTotal++;
2390           setImageLoadHandlers(img, imageObj);
2391         } else if ( isSameOrigin( src ) || options.allowTaint ===  true ) {
2392           imageObj = images[src] = {
2393             img: img
2394           };
2395           images.numTotal++;
2396           setImageLoadHandlers(img, imageObj);
2397           img.src = src;
2398         } else if ( supportCORS && !options.allowTaint && options.useCORS ) {
2399           // attempt to load with CORS
2400
2401           img.crossOrigin = "anonymous";
2402           imageObj = images[src] = {
2403             img: img
2404           };
2405           images.numTotal++;
2406           setImageLoadHandlers(img, imageObj);
2407           img.src = src;
2408         } else if ( options.proxy ) {
2409           imageObj = images[src] = {
2410             img: img
2411           };
2412           images.numTotal++;
2413           proxyGetImage( src, img, imageObj );
2414         }
2415       }
2416
2417     },
2418     cleanupDOM: function(cause) {
2419       var img, src;
2420       if (!images.cleanupDone) {
2421         if (cause && typeof cause === "string") {
2422           Util.log("html2canvas: Cleanup because: " + cause);
2423         } else {
2424           Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");
2425         }
2426
2427         for (src in images) {
2428           if (images.hasOwnProperty(src)) {
2429             img = images[src];
2430             if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {
2431               // cancel proxy image request
2432               window[img.callbackname] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)
2433               try {
2434                 delete window[img.callbackname];  // for all browser that support this
2435               } catch(ex) {}
2436               if (img.script && img.script.parentNode) {
2437                 img.script.setAttribute("src", "about:blank");  // try to cancel running request
2438                 img.script.parentNode.removeChild(img.script);
2439               }
2440               images.numLoaded++;
2441               images.numFailed++;
2442               Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);
2443             }
2444           }
2445         }
2446
2447         // cancel any pending requests
2448         if(window.stop !== undefined) {
2449           window.stop();
2450         } else if(document.execCommand !== undefined) {
2451           document.execCommand("Stop", false);
2452         }
2453         if (document.close !== undefined) {
2454           document.close();
2455         }
2456         images.cleanupDone = true;
2457         if (!(cause && typeof cause === "string")) {
2458           start();
2459         }
2460       }
2461     },
2462
2463     renderingDone: function() {
2464       if (timeoutTimer) {
2465         window.clearTimeout(timeoutTimer);
2466       }
2467     }
2468   };
2469
2470   if (options.timeout > 0) {
2471     timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
2472   }
2473
2474   Util.log('html2canvas: Preload starts: finding background-images');
2475   images.firstRun = true;
2476
2477   getImages(element);
2478
2479   Util.log('html2canvas: Preload: Finding images');
2480   // load <img> images
2481   for (i = 0; i < imgLen; i+=1){
2482     methods.loadImage( domImages[i].getAttribute( "src" ) );
2483   }
2484
2485   images.firstRun = false;
2486   Util.log('html2canvas: Preload: Done.');
2487   if (images.numTotal === images.numLoaded) {
2488     start();
2489   }
2490
2491   return methods;
2492 };
2493
2494 _html2canvas.Renderer = function(parseQueue, options){
2495
2496   // http://www.w3.org/TR/CSS21/zindex.html
2497   function createRenderQueue(parseQueue) {
2498     var queue = [],
2499     rootContext;
2500
2501     rootContext = (function buildStackingContext(rootNode) {
2502       var rootContext = {};
2503       function insert(context, node, specialParent) {
2504         var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex),
2505         contextForChildren = context, // the stacking context for children
2506         isPositioned = node.zIndex.isPositioned,
2507         isFloated = node.zIndex.isFloated,
2508         stub = {node: node},
2509         childrenDest = specialParent; // where children without z-index should be pushed into
2510
2511         if (node.zIndex.ownStacking) {
2512           // '!' comes before numbers in sorted array
2513           contextForChildren = stub.context = { '!': [{node:node, children: []}]};
2514           childrenDest = undefined;
2515         } else if (isPositioned || isFloated) {
2516           childrenDest = stub.children = [];
2517         }
2518
2519         if (zi === 0 && specialParent) {
2520           specialParent.push(stub);
2521         } else {
2522           if (!context[zi]) { context[zi] = []; }
2523           context[zi].push(stub);
2524         }
2525
2526         node.zIndex.children.forEach(function(childNode) {
2527           insert(contextForChildren, childNode, childrenDest);
2528         });
2529       }
2530       insert(rootContext, rootNode);
2531       return rootContext;
2532     })(parseQueue);
2533
2534     function sortZ(context) {
2535       Object.keys(context).sort().forEach(function(zi) {
2536         var nonPositioned = [],
2537         floated = [],
2538         positioned = [],
2539         list = [];
2540
2541         // positioned after static
2542         context[zi].forEach(function(v) {
2543           if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) {
2544             // http://www.w3.org/TR/css3-color/#transparency
2545             // non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.
2546             positioned.push(v);
2547           } else if (v.node.zIndex.isFloated) {
2548             floated.push(v);
2549           } else {
2550             nonPositioned.push(v);
2551           }
2552         });
2553
2554         (function walk(arr) {
2555           arr.forEach(function(v) {
2556             list.push(v);
2557             if (v.children) { walk(v.children); }
2558           });
2559         })(nonPositioned.concat(floated, positioned));
2560
2561         list.forEach(function(v) {
2562           if (v.context) {
2563             sortZ(v.context);
2564           } else {
2565             queue.push(v.node);
2566           }
2567         });
2568       });
2569     }
2570
2571     sortZ(rootContext);
2572
2573     return queue;
2574   }
2575
2576   function getRenderer(rendererName) {
2577     var renderer;
2578
2579     if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) {
2580       renderer = _html2canvas.Renderer[rendererName](options);
2581     } else if (typeof rendererName === "function") {
2582       renderer = rendererName(options);
2583     } else {
2584       throw new Error("Unknown renderer");
2585     }
2586
2587     if ( typeof renderer !== "function" ) {
2588       throw new Error("Invalid renderer defined");
2589     }
2590     return renderer;
2591   }
2592
2593   return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas);
2594 };
2595
2596 _html2canvas.Util.Support = function (options, doc) {
2597
2598   function supportSVGRendering() {
2599     var img = new Image(),
2600     canvas = doc.createElement("canvas"),
2601     ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d");
2602     if (ctx === false) {
2603       return false;
2604     }
2605     canvas.width = canvas.height = 10;
2606     img.src = [
2607     "data:image/svg+xml,",
2608     "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>",
2609     "<foreignObject width='10' height='10'>",
2610     "<div xmlns='http://www.w3.org/1999/xhtml' style='width:10;height:10;'>",
2611     "sup",
2612     "</div>",
2613     "</foreignObject>",
2614     "</svg>"
2615     ].join("");
2616     try {
2617       ctx.drawImage(img, 0, 0);
2618       canvas.toDataURL();
2619     } catch(e) {
2620       return false;
2621     }
2622     _html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available');
2623     return true;
2624   }
2625
2626   // Test whether we can use ranges to measure bounding boxes
2627   // Opera doesn't provide valid bounds.height/bottom even though it supports the method.
2628
2629   function supportRangeBounds() {
2630     var r, testElement, rangeBounds, rangeHeight, support = false;
2631
2632     if (doc.createRange) {
2633       r = doc.createRange();
2634       if (r.getBoundingClientRect) {
2635         testElement = doc.createElement('boundtest');
2636         testElement.style.height = "123px";
2637         testElement.style.display = "block";
2638         doc.body.appendChild(testElement);
2639
2640         r.selectNode(testElement);
2641         rangeBounds = r.getBoundingClientRect();
2642         rangeHeight = rangeBounds.height;
2643
2644         if (rangeHeight === 123) {
2645           support = true;
2646         }
2647         doc.body.removeChild(testElement);
2648       }
2649     }
2650
2651     return support;
2652   }
2653
2654   return {
2655     rangeBounds: supportRangeBounds(),
2656     svgRendering: options.svgRendering && supportSVGRendering()
2657   };
2658 };
2659 window.html2canvas = function(elements, opts) {
2660   elements = (elements.length) ? elements : [elements];
2661   var queue,
2662   canvas,
2663   options = {
2664     // general
2665     logging: false,
2666     elements: elements,
2667     background: "#fff",
2668
2669     // preload options
2670     proxy: null,
2671     timeout: 0,    // no timeout
2672     useCORS: false, // try to load images as CORS (where available), before falling back to proxy
2673     allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true
2674
2675     // parse options
2676     svgRendering: false, // use svg powered rendering where available (FF11+)
2677     ignoreElements: "IFRAME|OBJECT|PARAM",
2678     useOverflow: true,
2679     letterRendering: false,
2680     chinese: false,
2681
2682     // render options
2683
2684     width: null,
2685     height: null,
2686     taintTest: true, // do a taint test with all images before applying to canvas
2687     renderer: "Canvas"
2688   };
2689
2690   options = _html2canvas.Util.Extend(opts, options);
2691
2692   _html2canvas.logging = options.logging;
2693   options.complete = function( images ) {
2694
2695     if (typeof options.onpreloaded === "function") {
2696       if ( options.onpreloaded( images ) === false ) {
2697         return;
2698       }
2699     }
2700     queue = _html2canvas.Parse( images, options );
2701
2702     if (typeof options.onparsed === "function") {
2703       if ( options.onparsed( queue ) === false ) {
2704         return;
2705       }
2706     }
2707
2708     canvas = _html2canvas.Renderer( queue, options );
2709
2710     if (typeof options.onrendered === "function") {
2711       options.onrendered( canvas );
2712     }
2713
2714
2715   };
2716
2717   // for pages without images, we still want this to be async, i.e. return methods before executing
2718   window.setTimeout( function(){
2719     _html2canvas.Preload( options );
2720   }, 0 );
2721
2722   return {
2723     render: function( queue, opts ) {
2724       return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );
2725     },
2726     parse: function( images, opts ) {
2727       return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );
2728     },
2729     preload: function( opts ) {
2730       return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );
2731     },
2732     log: _html2canvas.Util.log
2733   };
2734 };
2735
2736 window.html2canvas.log = _html2canvas.Util.log; // for renderers
2737 window.html2canvas.Renderer = {
2738   Canvas: undefined // We are assuming this will be used
2739 };
2740 _html2canvas.Renderer.Canvas = function(options) {
2741   options = options || {};
2742
2743   var doc = document,
2744   safeImages = [],
2745   testCanvas = document.createElement("canvas"),
2746   testctx = testCanvas.getContext("2d"),
2747   Util = _html2canvas.Util,
2748   canvas = options.canvas || doc.createElement('canvas');
2749
2750   function createShape(ctx, args) {
2751     ctx.beginPath();
2752     args.forEach(function(arg) {
2753       ctx[arg.name].apply(ctx, arg['arguments']);
2754     });
2755     ctx.closePath();
2756   }
2757
2758   function safeImage(item) {
2759     if (safeImages.indexOf(item['arguments'][0].src ) === -1) {
2760       testctx.drawImage(item['arguments'][0], 0, 0);
2761       try {
2762         testctx.getImageData(0, 0, 1, 1);
2763       } catch(e) {
2764         testCanvas = doc.createElement("canvas");
2765         testctx = testCanvas.getContext("2d");
2766         return false;
2767       }
2768       safeImages.push(item['arguments'][0].src);
2769     }
2770     return true;
2771   }
2772
2773   function renderItem(ctx, item) {
2774     switch(item.type){
2775       case "variable":
2776         ctx[item.name] = item['arguments'];
2777         break;
2778       case "function":
2779         switch(item.name) {
2780           case "createPattern":
2781             if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) {
2782               try {
2783                 ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat");
2784               }
2785               catch(e) {
2786                 Util.log("html2canvas: Renderer: Error creating pattern", e.message);
2787               }
2788             }
2789             break;
2790           case "drawShape":
2791             createShape(ctx, item['arguments']);
2792             break;
2793           case "drawImage":
2794             if (item['arguments'][8] > 0 && item['arguments'][7] > 0) {
2795               if (!options.taintTest || (options.taintTest && safeImage(item))) {
2796                 ctx.drawImage.apply( ctx, item['arguments'] );
2797               }
2798             }
2799             break;
2800           default:
2801             ctx[item.name].apply(ctx, item['arguments']);
2802         }
2803         break;
2804     }
2805   }
2806
2807   return function(parsedData, options, document, queue, _html2canvas) {
2808     var ctx = canvas.getContext("2d"),
2809     newCanvas,
2810     bounds,
2811     fstyle,
2812     zStack = parsedData.stack;
2813
2814     canvas.width = canvas.style.width =  options.width || zStack.ctx.width;
2815     canvas.height = canvas.style.height = options.height || zStack.ctx.height;
2816
2817     fstyle = ctx.fillStyle;
2818     ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;
2819     ctx.fillRect(0, 0, canvas.width, canvas.height);
2820     ctx.fillStyle = fstyle;
2821
2822     queue.forEach(function(storageContext) {
2823       // set common settings for canvas
2824       ctx.textBaseline = "bottom";
2825       ctx.save();
2826
2827       if (storageContext.transform.matrix) {
2828         ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]);
2829         ctx.transform.apply(ctx, storageContext.transform.matrix);
2830         ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]);
2831       }
2832
2833       if (storageContext.clip){
2834         ctx.beginPath();
2835         ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);
2836         ctx.clip();
2837       }
2838
2839       if (storageContext.ctx.storage) {
2840         storageContext.ctx.storage.forEach(function(item) {
2841           renderItem(ctx, item);
2842         });
2843       }
2844
2845       ctx.restore();
2846     });
2847
2848     Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");
2849
2850     if (options.elements.length === 1) {
2851       if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {
2852         // crop image to the bounds of selected (single) element
2853         bounds = _html2canvas.Util.Bounds(options.elements[0]);
2854         newCanvas = document.createElement('canvas');
2855         newCanvas.width = Math.ceil(bounds.width);
2856         newCanvas.height = Math.ceil(bounds.height);
2857         ctx = newCanvas.getContext("2d");
2858
2859         ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);
2860         canvas = null;
2861         return newCanvas;
2862       }
2863     }
2864
2865     return canvas;
2866   };
2867 };
2868 })(window,document);