Crop image with fabric js

  canvas, fabricjs, javascript

I tried to use this crop function ( on my fabric js application, but it seems like it don’t work with large images. What i suspect is whenever i press the button to crop the image, the image.clipTo =function(ctx)…. it’s not recognizing if i previously resized the image..

P.S: canvas is being created in other js file like so
let canvas = new fabric.Canvas("c", {
preserveObjectStacking: true

let mouseDown;

// only allow one crop. turn it off after that
var disabled = false;
var rectangle = new fabric.Rect({
  fill: 'rgba(255, 172, 172, 0.486)',
  stroke: '#ccc',
  strokeDashArray: [2, 2],
  visible: false

const container = document.getElementById('c').getBoundingClientRect();
let image;
fabric.util.loadImage("", function(img) {
  image = new fabric.Image(img);
  image.set({ });
  image.selectable = false;

// capture the event when the user clicks the mouse button down
canvas.on("mouse:down", function(event) {
  if(!disabled) {
    rectangle.width = 2;
    rectangle.height = 2;
    rectangle.left = event.e.pageX - container.left; = event.e.pageY -;
    rectangle.visible = true;
    mouseDown = event.e;
// draw the rectangle as the mouse is moved after a down click
canvas.on("mouse:move", function(event) {
  if(mouseDown && !disabled) {
      rectangle.width = event.e.pageX - mouseDown.pageX;
      rectangle.height = event.e.pageY - mouseDown.pageY;
// when mouse click is released, end cropping mode
canvas.on("mouse:up", function() {
  mouseDown = null;
$('#cropB').on('click', function() {
  image.clipTo = function(ctx) {
      // origin is the center of the image
      var x = rectangle.left - image.getScaledWidth() / 2;
      var y = - image.getScaledHeight() / 2;
      ctx.rect(x, y, rectangle.width, rectangle.height);
    image.selectable = true;
    disabled = true;
    rectangle.visible = false;
<!DOCTYPE html>
<html lang="pt-BR">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./assets/favicon.ico" />
    <link rel="preconnect" href="">
    <link href="[email protected];400;500&display=swap" rel="stylesheet">    
    <link rel="stylesheet" type="text/css" href="./index.css">
    <link rel="preconnect" href="">
    <title>GPM photo editor</title>

        <img src="./assets/nwsoft-logo-removebg-preview.png" alt="" id="logo-image">
        <section id="tools">
            <input type="file" name="file" id="uploadImage" class="inputfile">
            <label for="uploadImage">Upload imagem</label>
            <img src="./assets/crop.svg" id="cropB" alt="Recortar imagem" class="tool-button">
            <img src="./assets/right-arrow.svg" id="line-shape-arrows" alt="Desenhar flecha" class="tool-button" onclick="">
            <img src="./assets/type.svg" alt="Inserir texto" class="tool-button" onclick="addText()" id="insert-text">
            <img id="addRect" class="tool-button" type="button" value="desenha retangulo" src="./assets/rectangle.png" alt="Zoom in" onclick="addRect()">
            <img id="addLine" class="tool-button" type="button" value="Zoom ou" src="./assets/line.svg" alt="Zoom out" onclick="addLine()">
            <img id="saveImage" class="tool-button" type="button" value="Salvar imagem" src="./assets/diskette.svg" alt="Salvar imagem">

    <div class="container-canvas">
        <canvas cursor: crosshair;" id="c" width="1200" height="570" ></canvas>

    <script src="" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="./scripts/fabric-new.js"></script>
    <script src="./scripts/app.js"></script>
    <script src="./scripts/key-listeners.js"></script>
    <script src="./scripts/fileSaver.js"></script>
    <script src="./scripts/crop.js"></script>
    <script src="./scripts/objects-creation.js"></script>


Source: Ask Javascript Questions