ScreenShot webpage

Question

I have webpage which has jorgchart implemented on it which is extending vertically and horizontally over limits of webpage and showing scrollers,thats fine. But when we take snapshot of the same, it give snapshot of only visible area of webpage but complete div/canvas.Can someone please suggest...

var displayID = $("#canvasData").attr('class');
var canvas = document.querySelector("canvas");
html2canvas(document.querySelector("#" + displayID), {canvas: canvas}).then(function(canvas) {

        canvas.id = "h2canvas";
        $('.popup p').html(canvas);
        openPopUp('popup-x');
    });

Answer 1

Using this awesome answer, this should work:

// Reference values
var displayID = $("#canvasData").attr('class'),
canvas = document.querySelector("canvas"),
body = document.body,
html = document.documentElement;

// Calculate entire document width/height
var pageHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, 
html.scrollHeight, html.offsetHeight );

var pageWidth = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );

html2canvas(document.querySelector("#" + displayID), 
    {canvas: canvas, height: pageHeight, width: pageWidth})
    .then(function(canvas) {
        canvas.id = "h2canvas";
        $('.popup p').html(canvas);
        openPopUp('popup-x');
    });