JSFiddle - React, Tailwind, and code Playground

by theodore itzaris

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<h1>After Zooming the shapes positions are changing<h1>
    <canvas id="canvas" height=700 width=700></canvas>

JavaScript

var canvas = new fabric.Canvas("canvas");
fabric.Image.fromURL('http://www.nairaland.com/attachments/1539614_pow_jpegfbbdd74848f20f626bb76cedb0cdded3', function(oImg) {
    	 					oImg.scale(1.0).set({
    	 	     				left: 1,
    	 	      				top: 1,
    	 	      				selectable : false
    	 					});
    	 				  	canvas.add(oImg).setActiveObject(oImg);
    var circle = new fabric.Circle({
        left: 100,
        top: 80,
        originX: 'left',
        originY: 'top',
        radius: 45,
        angle: 0,
        fill: '',
        stroke:'red',
        strokeWidth:3
    });
    canvas.add(circle);
	canvas.renderAll();
    
_applyZoom();
});
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();
    var image = objects[0];
    var imageX = (currentMouseX - image.getLeft()),
        imageY = (currentMouseY - image.getTop());
    var dx = imageX * (factor - 1),
        dy = imageY * (factor - 1);
    //applying zoom values.
    for (var i in objects) {
       var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * factor;
            var tempScaleY = scaleY *...