JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<canvas id="c" width=500 height=500></canvas>
<div id="logs"></div>

JavaScript

var canvas = new fabric.Canvas('c');
  fabric.Image.fromURL('http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg', function(img) {
            img.left = 50;
            img.selectable=false;
            img.top = 50;
            canvas.add(img);
            canvas.centerObject(img);
            img.bringToFront();
            
     canvas.renderAll();  
     _applyZoom();
        })
              
            
            
            
var zoomBtn = document.getElementById("zoom");  
var currentMouseY = 0, currentMouseX = 0;
			var _applyZoom = function () {
				canvas.on("mouse:move", function(event) {
                    currentMouseY = Math.round(event.e.clientY );
                });
                canvas.getObjects()[0].on("mousemove", function(event) {
                    currentMouseX = Math.round(event.e.clientX );
                });
				var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
			    if (document.attachEvent) document.attachEvent("on"+mousewheelevt, _zoom) 
			    else if (document.addEventListener) document.addEventListener(mousewheelevt, _zoom, false)
				return this;
			}

			function _zoom(e, dragDelta) {  
					var evt=window.event || e;
					var delta = (dragDelta == undefined) ? evt.detail? evt.detail*(-120) : evt.wheelDelta : dragDelta;
				    var factor = 0.9;
				    if (delta > 0) {
				        factor = 1/factor;
				    }
				    var objects = canvas.getObjects();
			        //applying zoom values.
					for (var i in objects) {
						 var imageX = (currentMouseX - objects[i].getLeft()),
					        imageY = (currentMouseY - objects[i].getTop());
						 var dx = imageX * (factor - 1),
						        dy = imageY * (factor - 1);
							var lastLeft = objects[i].left;
              var lastTop = objects[i].top;
			    		objects[i].left = objects[i].left - dx;
			    		objects[i].top = objects[i].top - dy;
						objects[i].scaleX = objects[i].getScaleX() * factor;
			   ...