Fix rendering of content when window is scrolled

Author: niklasvh

dist/html2canvas.js

@@ -999,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);
@@ -1022,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;
 }
 

dist/html2canvas.min.js

@@ -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/core.js

@@ -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) {