Canvas bug?
by Vladimir
HTML
<div id="result" class="ui-resizable" style="height: 274px; width: 384px;"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div contenteditable="true" class="div selected ui-draggable ui-draggable-handle" style="background: rgb(238, 238, 238) none repeat scroll 0% 0%; text-shadow: 0px 0px 0px rgb(0, 0, 0); line-height: 15%; padding: 5px; height: 30px; width: 200px; font-size: 16px; font-family: serif; top: 116px; right: auto; bottom: auto; left: 57px;">Text</div></div>
<div id="result2">Text</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta1/html2canvas.js"></script>
CSS
#result,
#result2 {
background: #FFF;
margin: 10px;
width: 400px;
height: 100px;
}
.selected {
position: relative;
}
JavaScript
html2canvas(document.getElementById('result'), {
"logging": true,
"onrendered": function(canvas) {
var ctx = canvas.getContext('2d');
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
var img = new Image();
img.onload = function() {
img.onload = null;
window.open(img.src)
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
document.body.appendChild(img);
},
width: 400,
height: 274
});