I'm practicing on using html2canvas and trying to use it to transfer a part of the page to canvas.
I can make it happen but I lose the aspect ratio when doing it.
Below is what's inside of the whole document, just without tags like body, html, head, etc.
HTML Body :
<div id="wrapper">
<div id="left">
<img src="frame_37.png" style="height:50%;" />
<div id="button">transfer</div>
<div class="littlebox" style="left: 50px; top: 40px;"></div>
<div class="littlebox" style="left: 75px; top: 95px;"></div>
</div>
<div id="right">
<canvas id="thecanvas"></canvas>
</div>
</div>
Javascript Block :
$(document).ready(function(e) {
$("#button").on("click", function(event) {
html2canvas(document.body, {
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
var can = document.getElementById('thecanvas');
var destCtx = can.getContext('2d');
destCtx.drawImage(canvas, 0, 0);
}
});
});
});
CSS :
body { height:100%; width:100%; margin:0 !important;
padding:0 !important; overflow:hidden; }
#wrapper { width:100%; height:100%; position: absolute;}
#left { background-color: #dfdfdd; float:left; width:50%; height:100%; }
#right { background-color: #cdcdcd; float:left; width:50%; height:100%; }
#button { padding:20px; width:auto; height:auto; background:#00b1dc; }
#thecanvas { width:80%; height:80%; border:1px solid #fff; margin:10%; }
.littlebox { background:#fff; position:absolute; width:32px; height:32px; }
Screenshot :
you cannot set #thecanvas
width and height by percentage in CSS ... it does makes you lose aspect ratio.
#thecanvas { width:80%; height:80%;
...
Instead use inline html attribute or set it with jquery, this way you keep aspect ratio.
<canvas id="thecanvas" width="600" height="800"></canvas>
or
$('#thecanvas').width(...).height(...)