title: FabricJs - How to reevaluate the points within an object after the object is rotated
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = new fabric.Canvas("c", {
    selection: false
  });
  
  var refRect = new fabric.Rect({
    left: 250,
    top: 150,
    width: 200,
    height: 100,
    fill: 'transparent',
    stroke: 'blue',
    originX: 'center',
    originY: 'center'
  });
  
  canvas.add(refRect);
  
  var refPoints = [
  { x: 0, y: 0 }, { x: 200, y: 0 }, { x: 0, y: 100 },
    { x: 200, y: 100 }, { x: 30, y: 50 },
    { x: 50, y: 30 }
  
  ];
  
  refPoints.map(function(point) {
    return new fabric.Circle({
      left: refRect.left - (refRect.width / 2) + point.x,
      top: refRect.top - (refRect.height / 2) + point.y,
      radius: 10,
      fill: 'blue',
      originX: 'center',
      originY: 'center'
    });
  }).forEach(function(refPoint) {
    canvas.add(refPoint);
  
  });
  
  
  var tarRect = new fabric.Rect({
      left: 250, top: 150,
      width: 200, height: 100,
      fill: 'transparent',
      angle:45,
      stroke: 'red',
      originX: 'center',
      originY: 'center'
  });
  
  canvas.add(tarRect);
  
  var matrix = tarRect.calcTransformMatrix();
  
  refPoints.map(function(point) {
    return new fabric.Circle({
      left: tarRect.left - (tarRect.width / 2) + point.x,
      top: tarRect.top - (tarRect.height / 2) + point.y,
      radius: 5,
      fill: 'red',
      originX: 'center',
      originY: 'center'
    });
  }).forEach(function(refPoint) {
    canvas.add(refPoint);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/fabric@1.7.11/dist/fabric.js"&gt;&lt;/script&gt;
  &lt;canvas id="c" width="500" height="300"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a fabric rectangle object and a bunch of points relative to the rectangle. I was able to position the points within the rectangle using a simple logic</p>
  
  <p>Now if i rotate the rectangle object by an angle, is there a way to evaluate the position of the points with respect to rotated rectangle. </p>
  
  <p>I'm no expert in math, so i need some directions please assist.</p>