Btukfyl

//Image Edit

var canvas = new fabric.Canvas('c', {

  preserveObjectStacking: true

});



canvas.setWidth(window.innerWidth);

canvas.setHeight(window.innerWidth);

fabric.Image.fromURL("https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg", function(img) {

  img.scale(0.5).set({

    left: 150,

    top: 150,

    angle: 0

  });

  canvas.add(img).setActiveObject(img);

});



var info = document.getElementById('info');









function resize() {

  var canvasSizer = document.getElementById("imageEditor");

  var canvasScaleFactor = canvasSizer.offsetWidth / 525;

  var width = canvasSizer.offsetWidth;

  var height = canvasSizer.offsetHeight;

  var ratio = canvas.getWidth() / canvas.getHeight();

  if ((width / height) > ratio) {

    width = height * ratio;

  } else {

    height = width / ratio;

  }

  var scale = width / canvas.getWidth();

  var zoom = canvas.getZoom();

  zoom *= scale;

  canvas.setDimensions({

    width: width,

    height: height

  });

  canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0])

  canvas.setOverlayImage('https://i.imgur.com/1CURvP5.png', function() {

    canvas.overlayImage && canvas.overlayImage.scaleToWidth(width)

    canvas.renderAll()

  }, {

    // Needed to position overlayImage at 0/0

    originX: 'left',

    originY: 'top'

  });

}



window.addEventListener('load', resize, false);

window.addEventListener('resize', resize, false);



var textObj = new fabric.IText("Test Text", {

  fontSize: 22,

  top: 362.5,

  left: 262.5,

  hasControls: true,

  fontWeight: 'bold',

  fontFamily: 'Montserrat',

  fontStyle: 'normal',

  centeredrotation: true,

  originX: 'center',

  originY: 'center'

});

canvas.add(textObj);

canvas.renderAll();



canvas.on({

  'touch:gesture': function() {

    var text = document.createTextNode(' Gesture ');

    info.insertBefore(text, info.firstChild);

  },

  'touch:drag': function() {

    var text = document.createTextNode(' Dragging ');

    info.insertBefore(text, info.firstChild);

  },

  'touch:orientation': function() {

    var text = document.createTextNode(' Orientation ');

    info.insertBefore(text, info.firstChild);

  },

  'touch:shake': function() {

    var text = document.createTextNode(' Shaking ');

    info.insertBefore(text, info.firstChild);

  },

  'touch:longpress': function() {

    var text = document.createTextNode(' Longpress ');

    info.insertBefore(text, info.firstChild);

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.4/fabric.js"></script>





<div id="imageEditor">

  <div class="canvas-container">

    <canvas id="c"></canvas>

  </div>

</div>