Myujth

My problem is that my image is very bigger than 3000*3000 and my canvas size is 600*600 which is fix so i have used scaleToHeight and scaleToWidth to fit image on canvas so my question is when i use crop (clipTo) functionality then image is not cropping according to my expected result please help me and i want to preserve quality of image as it is

load image url code

window.fabric.Image.fromURL(`http://files.all-free-download.com//downloadfiles/wallpapers/5120_2880/big_tiger_16987.jpg`, (img) => 
img.set(
left: 0,
top: 0
);
img.scaleToHeight(600);
img.scaleToWidth(600);
canvas.add(img);
)

crop button code

[![$("#btnCrop").click(function(e)
 //console.log("hii"); 
 var eLeft = cropBox.get('left');
 var eTop = cropBox.get('top');
 var left = eLeft - object.left;
 var top = eTop - object.top;
 left *= 1;
 top *= 1;
 var eWidth = cropBox.get('width');
 var eHeight = cropBox.get('height');
 var eScaleX = cropBox.get('scaleX');
 var eScaleY = cropBox.get('scaleY');
 var width = eWidth * 1;
 var height = eHeight * 1;
 object.clipTo = function (ctx) $("#btnCrop").click(function(e)
 //console.log("hii"); 
 var eLeft = cropBox.get('left');
 var eTop = cropBox.get('top');
 var left = eLeft - object.left;
 var top = eTop - object.top;
 left *= 1;
 top *= 1;
 var eWidth = cropBox.get('width');
 var eHeight = cropBox.get('height');
 var eScaleX = cropBox.get('scaleX');
 var eScaleY = cropBox.get('scaleY');
 var width = eWidth * 1;
 var height = eHeight * 1;
 object.clipTo = function (ctx) 
 ctx.rect(-(eWidth / 2) + left, -(eHeight / 2) + top, parseInt(width * eScaleX), parseInt(eScaleY * height));
 
 $("#btnCropBox").show();
 $("#btnCrop").hide();
 fabricCanvas.remove(cropBox);
);
 ctx.rect(-(eWidth / 2) + left, -(eHeight / 2) + top, parseInt(width * eScaleX), parseInt(eScaleY * height));
 
 $("#btnCropBox").show();
 $("#btnCrop").hide();
 fabricCanvas.remove(cropBox);
);