fabric js image create and resize
by ismusidhu
HTML
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="viewport" width="1000" height="1000" class="lower-canvas"></canvas>
CSS
canvas{
border: 1px solid black;
width:500px;
height:500px;
}
JavaScript
//https://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element
var aa = new fabric.Canvas('viewport');
//var canvas = document.getElementById('viewport'),
//context = canvas.getContext('2d');
fabric.util.loadImage('https://preview-swiftpv-cdn.infiswift.com/images/infiswift-loader-logo.png', function (img) {
var legimg = new fabric.Image(img, {
id: 'abx',
left: 100,
top: 100,
scaleX: 100 / img.width,
scaleY: ((img.height/img.width)*100) / img.height,
mt: false,
mb: false,
ml: false,
mr: false,
bl: false,
br: false,
tl: false,
tr: false,
mtr: false
});
aa.add(legimg);
aa.renderAll();
});
/* fabric.util.addListener(aa, 'contextmenu', function (e) {
alert('adf');
console.log(e);
});*/
setTimeout(function() {
var x = document.getElementById('viewport').nextSibling;
console.log(x);
x.remove();
}, 2000)