0.5.0-beta4

CHANGELOG.md

@@ -1,5 +1,24 @@
 ### Changelog ###
 
+v0.5.0-beta4 - 23.1.2016
+ * Fix logger requiring access to window object
+ * Derequire browserify build
+ * Fix rendering of specific elements when window is scrolled and `type` isn't set to `view`
+
+v0.5.0-beta3 - 6.12.2015
+ * Handle color names in linear gradients
+
+v0.5.0-beta2 - 20.10.2015
+ * Remove Promise polyfill (use native or provide it yourself)
+
+v0.5.0-beta1 - 19.10.2015
+ * Fix bug with unmatched color stops in gradients
+ * Fix scrolling issues with iOS
+ * Correctly handle named colors in gradients
+ * Accept matrix3d transforms
+ * Fix transparent colors breaking gradients
+ * Preserve scrolling positions on render
+
 v0.5.0-alpha2 - 3.2.2015
  * Switch to using browserify for building
  * Fix (#517) Chrome stretches background images with 'auto' or single attributes

Gruntfile.js

@@ -37,16 +37,6 @@ module.exports = function(grunt) {
             version: "11",
             platform: "Windows 8.1"
         },
-        safari6: {
-            browserName: "safari",
-            version: "6",
-            platform: "OS X 10.8"
-        },
-        safari7:{
-            browserName: "safari",
-            platform: "OS X 10.9",
-            version: "7"
-        },
         chromeOSX:{
             browserName: "chrome",
             platform: "OS X 10.8",
@@ -65,7 +55,10 @@ module.exports = function(grunt) {
                     browserifyOptions: {
                         standalone: 'html2canvas'
                     },
-                    banner: meta.banner
+                    banner: meta.banner,
+                    plugin: [
+                        [ "browserify-derequire" ]
+                    ]
                 }
             },
             svg: {
@@ -77,7 +70,10 @@ module.exports = function(grunt) {
                     browserifyOptions: {
                         standalone: 'html2canvas.svg'
                     },
-                    banner: meta.banner
+                    banner: meta.banner,
+                    plugin: [
+                        [ "browserify-derequire" ]
+                    ]
                 }
             }
         },

dist/html2canvas.js

@@ -1,26 +1,21 @@
 /*
-  html2canvas 0.5.0-beta2 <http://html2canvas.hertzen.com>
-  Copyright (c) 2015 Niklas von Hertzen
+  html2canvas 0.5.0-beta3 <http://html2canvas.hertzen.com>
+  Copyright (c) 2016 Niklas von Hertzen
 
   Released under  License
 */
 
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.html2canvas = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.html2canvas=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
 (function (global){
-/*! https://mths.be/punycode v1.3.2 by @mathias */
+/*! http://mths.be/punycode v1.2.4 by @mathias */
 ;(function(root) {
 
 	/** Detect free variables */
-	var freeExports = typeof exports == 'object' && exports &&
-		!exports.nodeType && exports;
+	var freeExports = typeof exports == 'object' && exports;
 	var freeModule = typeof module == 'object' && module &&
-		!module.nodeType && module;
+		module.exports == freeExports && module;
 	var freeGlobal = typeof global == 'object' && global;
-	if (
-		freeGlobal.global === freeGlobal ||
-		freeGlobal.window === freeGlobal ||
-		freeGlobal.self === freeGlobal
-	) {
+	if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
 		root = freeGlobal;
 	}
 
@@ -46,8 +41,8 @@
 
 	/** Regular expressions */
 	regexPunycode = /^xn--/,
-	regexNonASCII = /[^\x20-\x7E]/, // unprintable ASCII chars + non-ASCII chars
-	regexSeparators = /[\x2E\u3002\uFF0E\uFF61]/g, // RFC 3490 separators
+	regexNonASCII = /[^ -~]/, // unprintable ASCII chars + non-ASCII chars
+	regexSeparators = /\x2E|\u3002|\uFF0E|\uFF61/g, // RFC 3490 separators
 
 	/** Error messages */
 	errors = {
@@ -86,37 +81,23 @@
 	 */
 	function map(array, fn) {
 		var length = array.length;
-		var result = [];
 		while (length--) {
-			result[length] = fn(array[length]);
+			array[length] = fn(array[length]);
 		}
-		return result;
+		return array;
 	}
 
 	/**
-	 * A simple `Array#map`-like wrapper to work with domain name strings or email
-	 * addresses.
+	 * A simple `Array#map`-like wrapper to work with domain name strings.
 	 * @private
-	 * @param {String} domain The domain name or email address.
+	 * @param {String} domain The domain name.
 	 * @param {Function} callback The function that gets called for every
 	 * character.
 	 * @returns {Array} A new string of characters returned by the callback
 	 * function.
 	 */
 	function mapDomain(string, fn) {
-		var parts = string.split('@');
-		var result = '';
-		if (parts.length > 1) {
-			// In email addresses, only the domain name should be punycoded. Leave
-			// the local part (i.e. everything up to `@`) intact.
-			result = parts[0] + '@';
-			string = parts[1];
-		}
-		// Avoid `split(regex)` for IE8 compatibility. See #17.
-		string = string.replace(regexSeparators, '\x2E');
-		var labels = string.split('.');
-		var encoded = map(labels, fn).join('.');
-		return result + encoded;
+		return map(string.split(regexSeparators), fn).join('.');
 	}
 
 	/**
@@ -126,7 +107,7 @@
 	 * UCS-2 exposes as separate characters) into a single code point,
 	 * matching UTF-16.
 	 * @see `punycode.ucs2.encode`
-	 * @see <https://mathiasbynens.be/notes/javascript-encoding>
+	 * @see <http://mathiasbynens.be/notes/javascript-encoding>
 	 * @memberOf punycode.ucs2
 	 * @name decode
 	 * @param {String} string The Unicode input string (UCS-2).
@@ -335,8 +316,8 @@
 	}
 
 	/**
-	 * Converts a string of Unicode symbols (e.g. a domain name label) to a
-	 * Punycode string of ASCII-only symbols.
+	 * Converts a string of Unicode symbols to a Punycode string of ASCII-only
+	 * symbols.
 	 * @memberOf punycode
 	 * @param {String} input The string of Unicode symbols.
 	 * @returns {String} The resulting Punycode string of ASCII-only symbols.
@@ -449,18 +430,17 @@
 	}
 
 	/**
-	 * Converts a Punycode string representing a domain name or an email address
-	 * to Unicode. Only the Punycoded parts of the input will be converted, i.e.
-	 * it doesn't matter if you call it on a string that has already been
-	 * converted to Unicode.
+	 * Converts a Punycode string representing a domain name to Unicode. Only the
+	 * Punycoded parts of the domain name will be converted, i.e. it doesn't
+	 * matter if you call it on a string that has already been converted to
+	 * Unicode.
 	 * @memberOf punycode
-	 * @param {String} input The Punycoded domain name or email address to
-	 * convert to Unicode.
+	 * @param {String} domain The Punycode domain name to convert to Unicode.
 	 * @returns {String} The Unicode representation of the given Punycode
 	 * string.
 	 */
-	function toUnicode(input) {
-		return mapDomain(input, function(string) {
+	function toUnicode(domain) {
+		return mapDomain(domain, function(string) {
 			return regexPunycode.test(string)
 				? decode(string.slice(4).toLowerCase())
 				: string;
@@ -468,18 +448,15 @@
 	}
 
 	/**
-	 * Converts a Unicode string representing a domain name or an email address to
-	 * Punycode. Only the non-ASCII parts of the domain name will be converted,
-	 * i.e. it doesn't matter if you call it with a domain that's already in
-	 * ASCII.
+	 * Converts a Unicode string representing a domain name to Punycode. Only the
+	 * non-ASCII parts of the domain name will be converted, i.e. it doesn't
+	 * matter if you call it with a domain that's already in ASCII.
 	 * @memberOf punycode
-	 * @param {String} input The domain name or email address to convert, as a
-	 * Unicode string.
-	 * @returns {String} The Punycode representation of the given domain name or
-	 * email address.
+	 * @param {String} domain The domain name to convert, as a Unicode string.
+	 * @returns {String} The Punycode representation of the given domain name.
 	 */
-	function toASCII(input) {
-		return mapDomain(input, function(string) {
+	function toASCII(domain) {
+		return mapDomain(domain, function(string) {
 			return regexNonASCII.test(string)
 				? 'xn--' + encode(string)
 				: string;
@@ -495,11 +472,11 @@
 		 * @memberOf punycode
 		 * @type String
 		 */
-		'version': '1.3.2',
+		'version': '1.2.4',
 		/**
 		 * An object of methods to convert from JavaScript's internal character
 		 * representation (UCS-2) to Unicode code points, and back.
-		 * @see <https://mathiasbynens.be/notes/javascript-encoding>
+		 * @see <http://mathiasbynens.be/notes/javascript-encoding>
 		 * @memberOf punycode
 		 * @type Object
 		 */
@@ -524,8 +501,8 @@
 		define('punycode', function() {
 			return punycode;
 		});
-	} else if (freeExports && freeModule) {
-		if (module.exports == freeExports) { // in Node.js or RingoJS v0.8.0+
+	} else if (freeExports && !freeExports.nodeType) {
+		if (freeModule) { // in Node.js or RingoJS v0.8.0+
 			freeModule.exports = punycode;
 		} else { // in Narwhal or RingoJS v0.7.0-
 			for (key in punycode) {
@@ -539,8 +516,8 @@
 }(this));
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],2:[function(require,module,exports){
-var log = require('./log');
+},{}],2:[function(_dereq_,module,exports){
+var log = _dereq_('./log');
 
 function restoreOwnerScroll(ownerDocument, x, y) {
     if (ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) {
@@ -645,7 +622,7 @@ module.exports = function(ownerDocument, containerDocument, width, height, optio
     });
 };
 
-},{"./log":13}],3:[function(require,module,exports){
+},{"./log":13}],3:[function(_dereq_,module,exports){
 // http://dev.w3.org/csswg/css-color/
 
 function Color(value) {
@@ -919,16 +896,16 @@ var colors = {
 
 module.exports = Color;
 
-},{}],4:[function(require,module,exports){
-var Support = require('./support');
-var CanvasRenderer = require('./renderers/canvas');
-var ImageLoader = require('./imageloader');
-var NodeParser = require('./nodeparser');
-var NodeContainer = require('./nodecontainer');
-var log = require('./log');
-var utils = require('./utils');
-var createWindowClone = require('./clone');
-var loadUrlDocument = require('./proxy').loadUrlDocument;
+},{}],4:[function(_dereq_,module,exports){
+var Support = _dereq_('./support');
+var CanvasRenderer = _dereq_('./renderers/canvas');
+var ImageLoader = _dereq_('./imageloader');
+var NodeParser = _dereq_('./nodeparser');
+var NodeContainer = _dereq_('./nodecontainer');
+var log = _dereq_('./log');
+var utils = _dereq_('./utils');
+var createWindowClone = _dereq_('./clone');
+var loadUrlDocument = _dereq_('./proxy').loadUrlDocument;
 var getBounds = utils.getBounds;
 
 var html2canvasNodeAttribute = "data-html2canvas-node";
@@ -938,8 +915,8 @@ function html2canvas(nodeList, options) {
     var index = html2canvasCloneIndex++;
     options = options || {};
     if (options.logging) {
-        window.html2canvas.logging = true;
-        window.html2canvas.start = Date.now();
+        log.options.logging = true;
+        log.options.start = Date.now();
     }
 
     options.async = typeof(options.async) === "undefined" ? true : options.async;
@@ -1022,7 +999,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
         } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
             canvas = renderer.canvas;
         } else {
-            canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
+            canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
         }
 
         cleanupContainer(container, options);
@@ -1045,9 +1022,11 @@ function crop(canvas, bounds) {
     var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
     croppedCanvas.width = bounds.width;
     croppedCanvas.height =  bounds.height;
-    log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1));
-    log("Resulting crop with width", bounds.width, "and height", bounds.height, " with x", x1, "and y", y1);
-    croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1);
+    var width = x2-x1;
+    var height = y2-y1;
+    log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", width, "height:", height);
+    log("Resulting crop with width", bounds.width, "and height", bounds.height, "with x", x1, "and y", y1);
+    croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, width, height, bounds.x, bounds.y, width, height);
     return croppedCanvas;
 }
 
@@ -1074,9 +1053,9 @@ function absoluteUrl(url) {
     return link;
 }
 
-},{"./clone":2,"./imageloader":11,"./log":13,"./nodecontainer":14,"./nodeparser":15,"./proxy":16,"./renderers/canvas":20,"./support":22,"./utils":26}],5:[function(require,module,exports){
-var log = require('./log');
-var smallImage = require('./utils').smallImage;
+},{"./clone":2,"./imageloader":11,"./log":13,"./nodecontainer":14,"./nodeparser":15,"./proxy":16,"./renderers/canvas":20,"./support":22,"./utils":26}],5:[function(_dereq_,module,exports){
+var log = _dereq_('./log');
+var smallImage = _dereq_('./utils').smallImage;
 
 function DummyImageContainer(src) {
     this.src = src;
@@ -1098,8 +1077,8 @@ function DummyImageContainer(src) {
 
 module.exports = DummyImageContainer;
 
-},{"./log":13,"./utils":26}],6:[function(require,module,exports){
-var smallImage = require('./utils').smallImage;
+},{"./log":13,"./utils":26}],6:[function(_dereq_,module,exports){
+var smallImage = _dereq_('./utils').smallImage;
 
 function Font(family, size) {
     var container = document.createElement('div'),
@@ -1152,8 +1131,8 @@ function Font(family, size) {
 
 module.exports = Font;
 
-},{"./utils":26}],7:[function(require,module,exports){
-var Font = require('./font');
+},{"./utils":26}],7:[function(_dereq_,module,exports){
+var Font = _dereq_('./font');
 
 function FontMetrics() {
     this.data = {};
@@ -1168,10 +1147,10 @@ FontMetrics.prototype.getMetrics = function(family, size) {
 
 module.exports = FontMetrics;
 
-},{"./font":6}],8:[function(require,module,exports){
-var utils = require('./utils');
+},{"./font":6}],8:[function(_dereq_,module,exports){
+var utils = _dereq_('./utils');
 var getBounds = utils.getBounds;
-var loadUrlDocument = require('./proxy').loadUrlDocument;
+var loadUrlDocument = _dereq_('./proxy').loadUrlDocument;
 
 function FrameContainer(container, sameOrigin, options) {
     this.image = null;
@@ -1187,7 +1166,7 @@ function FrameContainer(container, sameOrigin, options) {
             resolve(container);
         }
     })).then(function(container) {
-        var html2canvas = require('./core');
+        var html2canvas = _dereq_('./core');
         return html2canvas(container.contentWindow.document.documentElement, {type: 'view', width: container.width, height: container.height, proxy: options.proxy, javascriptEnabled: options.javascriptEnabled, removeContainer: options.removeContainer, allowTaint: options.allowTaint, imageTimeout: options.imageTimeout / 2});
     }).then(function(canvas) {
         return self.image = canvas;
@@ -1201,7 +1180,7 @@ FrameContainer.prototype.proxyLoad = function(proxy, bounds, options) {
 
 module.exports = FrameContainer;
 
-},{"./core":4,"./proxy":16,"./utils":26}],9:[function(require,module,exports){
+},{"./core":4,"./proxy":16,"./utils":26}],9:[function(_dereq_,module,exports){
 function GradientContainer(imageData) {
     this.src = imageData.value;
     this.colorStops = [];
@@ -1224,7 +1203,7 @@ GradientContainer.REGEXP_COLORSTOP = /^\s*(rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,
 
 module.exports = GradientContainer;
 
-},{}],10:[function(require,module,exports){
+},{}],10:[function(_dereq_,module,exports){
 function ImageContainer(src, cors) {
     this.src = src;
     this.image = new Image();
@@ -1245,17 +1224,17 @@ function ImageContainer(src, cors) {
 
 module.exports = ImageContainer;
 
-},{}],11:[function(require,module,exports){
-var log = require('./log');
-var ImageContainer = require('./imagecontainer');
-var DummyImageContainer = require('./dummyimagecontainer');
-var ProxyImageContainer = require('./proxyimagecontainer');
-var FrameContainer = require('./framecontainer');
-var SVGContainer = require('./svgcontainer');
-var SVGNodeContainer = require('./svgnodecontainer');
-var LinearGradientContainer = require('./lineargradientcontainer');
-var WebkitGradientContainer = require('./webkitgradientcontainer');
-var bind = require('./utils').bind;
+},{}],11:[function(_dereq_,module,exports){
+var log = _dereq_('./log');
+var ImageContainer = _dereq_('./imagecontainer');
+var DummyImageContainer = _dereq_('./dummyimagecontainer');
+var ProxyImageContainer = _dereq_('./proxyimagecontainer');
+var FrameContainer = _dereq_('./framecontainer');
+var SVGContainer = _dereq_('./svgcontainer');
+var SVGNodeContainer = _dereq_('./svgnodecontainer');
+var LinearGradientContainer = _dereq_('./lineargradientcontainer');
+var WebkitGradientContainer = _dereq_('./webkitgradientcontainer');
+var bind = _dereq_('./utils').bind;
 
 function ImageLoader(options, support) {
     this.link = null;
@@ -1404,9 +1383,9 @@ ImageLoader.prototype.timeout = function(container, timeout) {
 
 module.exports = ImageLoader;
 
-},{"./dummyimagecontainer":5,"./framecontainer":8,"./imagecontainer":10,"./lineargradientcontainer":12,"./log":13,"./proxyimagecontainer":17,"./svgcontainer":23,"./svgnodecontainer":24,"./utils":26,"./webkitgradientcontainer":27}],12:[function(require,module,exports){
-var GradientContainer = require('./gradientcontainer');
-var Color = require('./color');
+},{"./dummyimagecontainer":5,"./framecontainer":8,"./imagecontainer":10,"./lineargradientcontainer":12,"./log":13,"./proxyimagecontainer":17,"./svgcontainer":23,"./svgnodecontainer":24,"./utils":26,"./webkitgradientcontainer":27}],12:[function(_dereq_,module,exports){
+var GradientContainer = _dereq_('./gradientcontainer');
+var Color = _dereq_('./color');
 
 function LinearGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
@@ -1508,16 +1487,19 @@ LinearGradientContainer.REGEXP_DIRECTION = /^\s*(?:to|left|right|top|bottom|cent
 
 module.exports = LinearGradientContainer;
 
-},{"./color":3,"./gradientcontainer":9}],13:[function(require,module,exports){
-module.exports = function() {
-    if (window.html2canvas.logging && window.console && window.console.log) {
-        Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
+},{"./color":3,"./gradientcontainer":9}],13:[function(_dereq_,module,exports){
+var logger = function() {
+    if (logger.options.logging && window.console && window.console.log) {
+        Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - logger.options.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
     }
 };
 
-},{}],14:[function(require,module,exports){
-var Color = require('./color');
-var utils = require('./utils');
+logger.options = {logging: false};
+module.exports = logger;
+
+},{}],14:[function(_dereq_,module,exports){
+var Color = _dereq_('./color');
+var utils = _dereq_('./utils');
 var getBounds = utils.getBounds;
 var parseBackgrounds = utils.parseBackgrounds;
 var offsetBounds = utils.offsetBounds;
@@ -1813,16 +1795,16 @@ function asFloat(str) {
 
 module.exports = NodeContainer;
 
-},{"./color":3,"./utils":26}],15:[function(require,module,exports){
-var log = require('./log');
-var punycode = require('punycode');
-var NodeContainer = require('./nodecontainer');
-var TextContainer = require('./textcontainer');
-var PseudoElementContainer = require('./pseudoelementcontainer');
-var FontMetrics = require('./fontmetrics');
-var Color = require('./color');
-var StackingContext = require('./stackingcontext');
-var utils = require('./utils');
+},{"./color":3,"./utils":26}],15:[function(_dereq_,module,exports){
+var log = _dereq_('./log');
+var punycode = _dereq_('punycode');
+var NodeContainer = _dereq_('./nodecontainer');
+var TextContainer = _dereq_('./textcontainer');
+var PseudoElementContainer = _dereq_('./pseudoelementcontainer');
+var FontMetrics = _dereq_('./fontmetrics');
+var Color = _dereq_('./color');
+var StackingContext = _dereq_('./stackingcontext');
+var utils = _dereq_('./utils');
 var bind = utils.bind;
 var getBounds = utils.getBounds;
 var parseBackgrounds = utils.parseBackgrounds;
@@ -2684,11 +2666,11 @@ function hasUnicode(string) {
 
 module.exports = NodeParser;
 
-},{"./color":3,"./fontmetrics":7,"./log":13,"./nodecontainer":14,"./pseudoelementcontainer":18,"./stackingcontext":21,"./textcontainer":25,"./utils":26,"punycode":1}],16:[function(require,module,exports){
-var XHR = require('./xhr');
-var utils = require('./utils');
-var log = require('./log');
-var createWindowClone = require('./clone');
+},{"./color":3,"./fontmetrics":7,"./log":13,"./nodecontainer":14,"./pseudoelementcontainer":18,"./stackingcontext":21,"./textcontainer":25,"./utils":26,"punycode":1}],16:[function(_dereq_,module,exports){
+var XHR = _dereq_('./xhr');
+var utils = _dereq_('./utils');
+var log = _dereq_('./log');
+var createWindowClone = _dereq_('./clone');
 var decode64 = utils.decode64;
 
 function Proxy(src, proxyUrl, document) {
@@ -2781,8 +2763,8 @@ exports.Proxy = Proxy;
 exports.ProxyURL = ProxyURL;
 exports.loadUrlDocument = loadUrlDocument;
 
-},{"./clone":2,"./log":13,"./utils":26,"./xhr":28}],17:[function(require,module,exports){
-var ProxyURL = require('./proxy').ProxyURL;
+},{"./clone":2,"./log":13,"./utils":26,"./xhr":28}],17:[function(_dereq_,module,exports){
+var ProxyURL = _dereq_('./proxy').ProxyURL;
 
 function ProxyImageContainer(src, proxy) {
     var link = document.createElement("a");
@@ -2804,8 +2786,8 @@ function ProxyImageContainer(src, proxy) {
 
 module.exports = ProxyImageContainer;
 
-},{"./proxy":16}],18:[function(require,module,exports){
-var NodeContainer = require('./nodecontainer');
+},{"./proxy":16}],18:[function(_dereq_,module,exports){
+var NodeContainer = _dereq_('./nodecontainer');
 
 function PseudoElementContainer(node, parent, type) {
     NodeContainer.call(this, node, parent);
@@ -2844,8 +2826,8 @@ PseudoElementContainer.prototype.PSEUDO_HIDE_ELEMENT_CLASS_AFTER = "___html2canv
 
 module.exports = PseudoElementContainer;
 
-},{"./nodecontainer":14}],19:[function(require,module,exports){
-var log = require('./log');
+},{"./nodecontainer":14}],19:[function(_dereq_,module,exports){
+var log = _dereq_('./log');
 
 function Renderer(width, height, images, options, document) {
     this.width = width;
@@ -2954,10 +2936,10 @@ Renderer.prototype.renderBackgroundRepeating = function(container, bounds, image
 
 module.exports = Renderer;
 
-},{"./log":13}],20:[function(require,module,exports){
-var Renderer = require('../renderer');
-var LinearGradientContainer = require('../lineargradientcontainer');
-var log = require('../log');
+},{"./log":13}],20:[function(_dereq_,module,exports){
+var Renderer = _dereq_('../renderer');
+var LinearGradientContainer = _dereq_('../lineargradientcontainer');
+var log = _dereq_('../log');
 
 function CanvasRenderer(width, height) {
     Renderer.apply(this, arguments);
@@ -3137,8 +3119,8 @@ function hasEntries(array) {
 
 module.exports = CanvasRenderer;
 
-},{"../lineargradientcontainer":12,"../log":13,"../renderer":19}],21:[function(require,module,exports){
-var NodeContainer = require('./nodecontainer');
+},{"../lineargradientcontainer":12,"../log":13,"../renderer":19}],21:[function(_dereq_,module,exports){
+var NodeContainer = _dereq_('./nodecontainer');
 
 function StackingContext(hasOwnStacking, opacity, element, parent) {
     NodeContainer.call(this, element, parent);
@@ -3157,7 +3139,7 @@ StackingContext.prototype.getParentStack = function(context) {
 
 module.exports = StackingContext;
 
-},{"./nodecontainer":14}],22:[function(require,module,exports){
+},{"./nodecontainer":14}],22:[function(_dereq_,module,exports){
 function Support(document) {
     this.rangeBounds = this.testRangeBounds(document);
     this.cors = this.testCORS();
@@ -3210,9 +3192,9 @@ Support.prototype.testSVG = function() {
 
 module.exports = Support;
 
-},{}],23:[function(require,module,exports){
-var XHR = require('./xhr');
-var decode64 = require('./utils').decode64;
+},{}],23:[function(_dereq_,module,exports){
+var XHR = _dereq_('./xhr');
+var decode64 = _dereq_('./utils').decode64;
 
 function SVGContainer(src) {
     this.src = src;
@@ -3264,8 +3246,8 @@ SVGContainer.prototype.decode64 = function(str) {
 
 module.exports = SVGContainer;
 
-},{"./utils":26,"./xhr":28}],24:[function(require,module,exports){
-var SVGContainer = require('./svgcontainer');
+},{"./utils":26,"./xhr":28}],24:[function(_dereq_,module,exports){
+var SVGContainer = _dereq_('./svgcontainer');
 
 function SVGNodeContainer(node, _native) {
     this.src = node;
@@ -3291,8 +3273,8 @@ SVGNodeContainer.prototype = Object.create(SVGContainer.prototype);
 
 module.exports = SVGNodeContainer;
 
-},{"./svgcontainer":23}],25:[function(require,module,exports){
-var NodeContainer = require('./nodecontainer');
+},{"./svgcontainer":23}],25:[function(_dereq_,module,exports){
+var NodeContainer = _dereq_('./nodecontainer');
 
 function TextContainer(node, parent) {
     NodeContainer.call(this, node, parent);
@@ -3326,7 +3308,7 @@ function capitalize(m, p1, p2) {
 
 module.exports = TextContainer;
 
-},{"./nodecontainer":14}],26:[function(require,module,exports){
+},{"./nodecontainer":14}],26:[function(_dereq_,module,exports){
 exports.smallImage = function smallImage() {
     return "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 };
@@ -3497,8 +3479,8 @@ exports.parseBackgrounds = function(backgroundImage) {
     return results;
 };
 
-},{}],27:[function(require,module,exports){
-var GradientContainer = require('./gradientcontainer');
+},{}],27:[function(_dereq_,module,exports){
+var GradientContainer = _dereq_('./gradientcontainer');
 
 function WebkitGradientContainer(imageData) {
     GradientContainer.apply(this, arguments);
@@ -3509,7 +3491,7 @@ WebkitGradientContainer.prototype = Object.create(GradientContainer.prototype);
 
 module.exports = WebkitGradientContainer;
 
-},{"./gradientcontainer":9}],28:[function(require,module,exports){
+},{"./gradientcontainer":9}],28:[function(_dereq_,module,exports){
 function XHR(url) {
     return new Promise(function(resolve, reject) {
         var xhr = new XMLHttpRequest();

package.json

@@ -3,7 +3,7 @@
   "name": "html2canvas",
   "description": "Screenshots with JavaScript",
   "main": "dist/html2canvas.js",
-  "version": "0.5.0-beta3",
+  "version": "0.5.0-beta4",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -22,6 +22,7 @@
   "devDependencies": {
     "base64-arraybuffer": "^0.1.5",
     "bluebird": "^3.0.6",
+    "browserify-derequire": "^0.9.4",
     "grunt": "^0.4.5",
     "grunt-browserify": "^4.0.1",
     "grunt-cli": "^0.1.13",

src/core.js

@@ -16,8 +16,8 @@ function html2canvas(nodeList, options) {
     var index = html2canvasCloneIndex++;
     options = options || {};
     if (options.logging) {
-        window.html2canvas.logging = true;
-        window.html2canvas.start = Date.now();
+        log.options.logging = true;
+        log.options.start = Date.now();
     }
 
     options.async = typeof(options.async) === "undefined" ? true : options.async;
@@ -100,7 +100,7 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
         } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
             canvas = renderer.canvas;
         } else {
-            canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: clonedWindow.pageXOffset, y: clonedWindow.pageYOffset});
+            canvas = crop(renderer.canvas, {width:  options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
         }
 
         cleanupContainer(container, options);
@@ -123,9 +123,11 @@ function crop(canvas, bounds) {
     var y2 = Math.min(canvas.height, Math.max(1, bounds.top + bounds.height));
     croppedCanvas.width = bounds.width;
     croppedCanvas.height =  bounds.height;
-    log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", (x2-x1), "height:", (y2-y1));
-    log("Resulting crop with width", bounds.width, "and height", bounds.height, " with x", x1, "and y", y1);
-    croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, x2-x1, y2-y1, bounds.x, bounds.y, x2-x1, y2-y1);
+    var width = x2-x1;
+    var height = y2-y1;
+    log("Cropping canvas at:", "left:", bounds.left, "top:", bounds.top, "width:", width, "height:", height);
+    log("Resulting crop with width", bounds.width, "and height", bounds.height, "with x", x1, "and y", y1);
+    croppedCanvas.getContext("2d").drawImage(canvas, x1, y1, width, height, bounds.x, bounds.y, width, height);
     return croppedCanvas;
 }
 

src/log.js

@@ -1,5 +1,8 @@
-module.exports = function() {
-    if (window.html2canvas.logging && window.console && window.console.log) {
-        Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
+var logger = function() {
+    if (logger.options.logging && window.console && window.console.log) {
+        Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - logger.options.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
     }
 };
+
+logger.options = {logging: false};
+module.exports = logger;

tests/mocha/scrolling.html

@@ -19,8 +19,8 @@
         <div style="height: 650px; background: green"></div>
     </div>
 </div>
-<div style="height: 2200px;"></div>
-<div style="height: 500px;background: green;"><a name="content">content</a></div>
+<div style="height: 2200px"></div>
+<div style="height: 500px;background: green;" id="bottom-content"><a name="content">&nbsp;</a></div>
 <script>
     describe("Scrolling", function() {
         it("with random scroll", function (done) {
@@ -58,7 +58,6 @@
             setTimeout(function() {
                 html2canvas(document.querySelector("#scroll-render")).then(function (canvas) {
                     expect($("#scrollable").scrollTop()).to.equal(500);
-                    document.body.appendChild(canvas);
                     expect(canvas.width).to.equal(200);
                     expect(canvas.height).to.equal(200);
                     validCanvasPixels(canvas);
@@ -68,6 +67,21 @@
                 });
             }, 0);
         });
+
+
+        it("with window scroll", function (done) {
+            $(window).scrollTop(500);
+            setTimeout(function() {
+                console.log(document.querySelector("#bottom-content").getBoundingClientRect().top);
+                html2canvas(document.querySelector("#bottom-content")).then(function (canvas) {
+                    expect($(window).scrollTop()).to.equal(500);
+                    validCanvasPixels(canvas);
+                    done();
+                }).catch(function (error) {
+                    done(error);
+                });
+            }, 0);
+        });
     });
 
     function validCanvasPixels(canvas) {