JSFiddle - React, Tailwind, and code Playground

by gaurav soni

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<canvas id="imageCanvas" width='800' height='600'>Your browser does not support HTML5 Canvas</canvas>

JavaScript

var img = document.createElement("img");
img.src ="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg";
var canvas = window._canvas = new fabric.Canvas("imageCanvas");

$(img).on('load',function(){
            imgInstance = new fabric.Image(img,{
                centeredRotation:true,
                centeredScaling:true,
                top:0,
                left:0
            });
            canvas.add(imgInstance);
     });


canvas.on("mouse:move",function(event){
            currentMouseY = Math.round(event.e.y - canvas._offset.top);
            currentMouseX = Math.round(event.e.x - canvas._offset.left);
});

function zoom(delta,target){

    
            
            var myMouseX,myMouseY;

            console.log("currentMouseX"+currentMouseX);
            console.log("currentMouseY"+currentMouseY);

            imgInstance.scaleX += 0.2;
            imgInstance.scaleY += 0.2;

            canvas.renderAll();

            imgInstance.setCoords();
         
            var newMousX = currentMouseX * 0.2;
            var newMousY = currentMouseY * 0.2;


            console.log("newMousX"+newMousX);
            console.log("newMousY"+newMousY);

            imgInstance.set({top:imgInstance.getTop()-newMousY,left:imgInstance.getLeft()-newMousX});

            console.log("imageY"+imgInstance.getTop());
            console.log("imageX"+imgInstance.getLeft());
    
               canvas.renderAll();

            imgInstance.setCoords();
            console.log(imgInstance.getBoundingRect());

            return false;   

        }   

$(canvas.wrapperEl).on("mousewheel",function(e){
    var target = canvas.findTarget(e);
    if (target) {
        var delta = e.originalEvent.wheelDelta / 120;
        zoom(delta,target);    
    };
      e.preventDefault() && false;
});