html2canvas converting visible part only
HTML
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<p>Scroll around to see different results below: <button id="html2canvas">Export</button></p>
<div id="container">
<div id="element">
</div>
</div>
<p>Result:</p>
<div id="result"><div>
CSS
#container {
height: 100px;
overflow: auto;
}
#element {
background-color: lightgrey;
}
JavaScript
// Fill element with many rows
for(var i = 0; i < 50; i++) {
$('#element').append('<p>' + i + '</p>');
}
$('#html2canvas').click(function() {
html2canvas($('#element'), {
onrendered: function (canvas) {
debugger;
$('#result').html(canvas);
}
});
});