title: Resizing Objects in Fabric.js
body: <p>I'm planning on using Frabic.js to build a room layout. It's based around a grid layout (grid size: 25) with the objects snapping into position. </p>
  
  <p>I'm trying to override resize events to make the width a multiple of the grid size (25). However it seems to be randomly resizing the the element. </p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>   var canvas = new fabric.Canvas('section', { selection: true }); fabric.Object.prototype.transparentCorners = false;
     var canvasWidth = 600;
     var canvasGrid = 25;
  
     canvas.on('object:modified', function(options) {
          options.target.set({opacity: 1}); // Return the opacity back to 1 after moving
  
          var newWidth = (Math.round(options.target.getWidth() / canvasGrid)) * canvasGrid;
          console.log("Width:" + options.target.getWidth());
          console.log("Desired width: " + newWidth);
  
          if(options.target.getWidth() !== newWidth) {
              console.log("alter the width");
              options.target.set({ width: newWidth });
              console.log("Width changed to: " + options.target.getWidth());
          }
  
          console.log("Final width: " + options.target.getWidth());
      });
  </code></pre>
  
  <p>The objects are added on the fly by the end user, the code for it is below. </p>
  
  <pre><code>    $("#addBlock").click(function(e){
          e.preventDefault();
  
          var block = new fabric.Rect({
              left: canvasGrid,
              top: canvasGrid,
              width: canvasGrid,
              height: canvasGrid,
              fill: 'rgb(127, 140, 141)',
              originX: 'left',
              originY: 'top',
              centeredRotation: false,
              lockScalingX: false,
              lockScalingY: false,
              lockRotation: false,
              hasControls: true,
              cornerSize: 8,
              hasBorders: false,
              padding: 0
          });
  
          canvas.add(block);
      });
  </code></pre>
  
  <p><strong>Console Output</strong></p>
  
  <pre><code>Width:170
  Desired width: 175
  alter the width
  Width changed to: 238.00000000000003
  Final width: 238.00000000000003
  </code></pre>
  
  <p>The desired width is what I would like the shapes/blocks to be resized to rather than it's final width. </p>