JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<div>
Visible Coordinates(x1, y1, x2, y2) : <span id="coords">
  
</span> 
</div>
<div id="canvasarea"><canvas width='512' height='512' id='canvas1'></canvas></div>

JavaScript

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

var applyZoom = function () {
	var canvasarea = document.getElementById("canvasarea");
	if (canvasarea.addEventListener) {
		// IE9, Chrome, Safari, Opera
		canvasarea.addEventListener("mousewheel", zoom, false);
		// Firefox
		canvasarea.addEventListener("DOMMouseScroll", zoom, false);
	}
	// IE 6/7/8
	else canvasarea.attachEvent("onmousewheel", zoom);
	return this;
}

function zoom(e) {  
		var evt=window.event || e;
		var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
		var curZoom = canvas.getZoom(),  newZoom = curZoom + delta / 4000,
		x = e.offsetX, y = e.offsetY;
		//applying zoom values.
		canvas.zoomToPoint({ x: x, y: y }, newZoom);
		if(e)e.preventDefault();
    var img = canvas._objects[0];
    var box = img.getBoundingRect();
    var x1 = box.left < 0 ? -(box.left) : 0;
    var x2 = box.width;
    var y1 = box.top < 0 ? -(box.top) : 0;
    var y2 = box.height;
    console.log(img.left, img.top, newZoom);
    coords.innerHTML = '(' + x1*newZoom + ',' + y1*newZoom + ',' + x2 + ',' + y2 + ')';
		return false;
} 


var canvas = new fabric.Canvas('canvas1');
  fabric.Image.fromURL('http://www.studyjs.com/images/cartoon.jpg', function(img) {
            img.left = 50;
            img.selectable=false;
            img.top = 50;
            canvas.add(img);
            canvas.centerObject(img);
            img.bringToFront();
            //bring image to center
	canvas.centerObject(img);
  canvas.backgroundColor = 'yellow';
	applyZoom();
     canvas.renderAll();
        })