Update html2canvas

Author: eKoopmans

lib/html2canvas.ek.js

@@ -940,8 +940,7 @@ function html2canvas(nodeList, options) {
 
     var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
     node.setAttribute(html2canvasNodeAttribute + index, index);
-    // EK 2017-03-24: Edited from `node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight,`.
-    return renderDocument(node.ownerDocument, options, node.clientWidth, node.clientHeight, index).then(function(canvas) {
+    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
         if (typeof(options.onrendered) === "function") {
             log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
             options.onrendered(canvas);
@@ -987,8 +986,9 @@ function renderWindow(node, container, options, windowWidth, windowHeight) {
     var support = new Support(clonedWindow.document);
     var imageLoader = new ImageLoader(options, support);
     var bounds = getBounds(node);
-    var width = options.type === "view" ? windowWidth : documentWidth(clonedWindow.document);
-    var height = options.type === "view" ? windowHeight : documentHeight(clonedWindow.document);
+    // EK 2017-03-24: Fix offscreen rendering - changed from documentHeight(clonedWindow.document), which is just set by windowWidth anyway!.
+    var width = options.type === "view" ? windowWidth : bounds.right;
+    var height = options.type === "view" ? windowHeight : bounds.bottom;
     var renderer = new options.renderer(width, height, imageLoader, options, document);
     var parser = new NodeParser(node, renderer, support, imageLoader, options);
     return parser.ready.then(function() {
@@ -1751,10 +1751,11 @@ NodeContainer.prototype.parseTransformMatrix = function() {
     return this.transformMatrix;
 };
 
+// EK 2017-03-25: Inverse transformation matrix for clip fix.
 NodeContainer.prototype.inverseTransform = function() {
     var transformData = this.parseTransform();
     return { origin: transformData.origin, matrix: matrixInverse(transformData.matrix) };
-}
+};
 
 NodeContainer.prototype.parseBounds = function() {
     return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
@@ -1797,8 +1798,9 @@ function parseMatrix(match) {
     }
 }
 
+// EK 2017-03-25: Inverse matrix for clip fix.
 function matrixInverse(m) {
-    // EK 2017-03-25: This is specifically programmed to work for transform matrices.
+    // This is programmed specifically for transform matrices, which have a fixed structure.
     var a = m[0], b = m[2], c = m[4], d = m[1], e = m[3], f = m[5];
     var det = a*e - b*d;
     var M = [e, -d, -b, a, b*f-c*e, c*d-a*f].map(function(val) {return val/det});
@@ -2226,7 +2228,7 @@ NodeParser.prototype.paintRadio = function(container) {
         if (container.node.checked) {
             this.renderer.circle(Math.ceil(bounds.left + size / 4) + 1, Math.ceil(bounds.top + size / 4) + 1, Math.floor(size / 2), new Color('#424242'));
         }
-    }, this);
+    }, this, container);
 };
 
 NodeParser.prototype.paintFormValue = function(container) {
@@ -2261,13 +2263,13 @@ NodeParser.prototype.paintFormValue = function(container) {
 NodeParser.prototype.paintText = function(container) {
     container.applyTextTransform();
     var characters = punycode.ucs2.decode(container.node.data);
-    // EK 2017-03-25: Ligature fix.
+    // EK 2017-03-26: Ligature fix.
     var wordRendering = (!this.options.letterRendering || noLetterSpacing(container)) && !hasUnicode(container.node.data);
     var textList = wordRendering ? getWords(characters) : characters.map(function(character) {
         return punycode.ucs2.encode([character]);
     });
     if (!wordRendering) {
-        container.parent.node.style.fontFeatureSettings = '"liga" 0';
+        container.parent.node.style.fontVariantLigatures = 'none';
     }
 
     var weight = container.parent.fontWeight();
@@ -2992,7 +2994,7 @@ function CanvasRenderer(width, height) {
     if (!this.options.canvas) {
         // EK 2017-03-25: Add scale/dpi.
         if (this.options.dpi) {
-			// Default canvas is 96dpi (1 CSS inch = 96px).
+            // Default canvas is 96dpi (1 CSS inch = 96px).
             this.options.scale = this.options.dpi / 96;
         }
         if (this.options.scale) {
@@ -3046,13 +3048,13 @@ CanvasRenderer.prototype.shadow = function(left, top, width, height, shadows) {
     }
     var drawShadow = function(shadow) {
         var info = parseShadow(shadow);
-		if (!info.inset) {
-			context.shadowOffsetX = info.x;
-			context.shadowOffsetY = info.y;
-			context.shadowColor = info.color;
-			context.shadowBlur = info.blur;
-			context.fill();
-		}
+        if (!info.inset) {
+            context.shadowOffsetX = info.x;
+            context.shadowOffsetY = info.y;
+            context.shadowColor = info.color;
+            context.shadowBlur = info.blur;
+            context.fill();
+        }
     }
 
     // Create a bounding rectangle with arbitrary opaque color.
@@ -3108,16 +3110,17 @@ CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx
 
 CanvasRenderer.prototype.clip = function(shapes, callback, context, container) {
     // EK 2017-03-25: Clip transform fix.
-    var hasTransform = container && container.hasTransform();
     this.ctx.save();
-    if (hasTransform) {
+    if (container && container.hasTransform()) {
         this.setTransform(container.inverseTransform());
-    }
-    shapes.filter(hasEntries).forEach(function(shape) {
-        this.shape(shape).clip();
-    }, this);
-    if (hasTransform) {
+        shapes.filter(hasEntries).forEach(function(shape) {
+            this.shape(shape).clip();
+        }, this);
         this.setTransform(container.parseTransform());
+    } else {
+        shapes.filter(hasEntries).forEach(function(shape) {
+            this.shape(shape).clip();
+        }, this);
     }
     callback.call(context);
     this.ctx.restore();
@@ -3147,19 +3150,10 @@ CanvasRenderer.prototype.shape = function(shape) {
     this.ctx.closePath();
     return this.ctx;
 };
-CanvasRenderer.prototype.shape2 = function(shape) {
-    this.ctx.beginPath();
-    shape.forEach(function(point, index) {
-        if (point[0] === "rect") {
-            this.ctx.rect.apply(this.ctx, point.slice(1));
-        } else {
-            this.ctx[(index === 0) ? "moveTo" : point[0] + "To" ].apply(this.ctx, point.slice(1));
-        }
-    }, this);
-    return this.ctx;
-};
 
 CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) {
+    // EK 2017-03-26: Ligature fix.
+    variant = /^(normal|small-caps)$/i.test(variant) ? variant : '';
     this.setFillStyle(color).font = [style, variant, weight, size, family].join(" ").split(",")[0];
 };