title: How does transforming points with a transformMatrix work in fabricJS?
body: <p>I'm trying to place points (made via <code>fabric.Circle</code>) on the corners of a <code>fabric.Polygon</code>. The polygon may be moved, scaled or rotated by the user. However, after each modification I want to have the new coordinates of the polygon to place my circles there.</p>
  
  <p>While digging deeper into this topic I found <a href="http://www.senocular.com/flash/tutorials/transformmatrix/" rel="nofollow noreferrer">this</a> great explanation of transformation matrices. I thought it's the perfect solution for what I want to achieve. But as you can see in the Fiddle, my points are always way off my polygon.</p>
  
  <p>As I'm not firm with geometric transformation etc. I hope someone can find my error and tell me what I'm missing :) Thanks.</p>
  
  <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 polygon = new fabric.Polygon([
    new fabric.Point(200, 50),
    new fabric.Point(250, 150),
    new fabric.Point(150, 150)
  ]);
  
  polygon.on("modified", function () {
    var matrix = this.calcTransformMatrix();
    var transformedPoints = this.get("points").map(function(p){
      return fabric.util.transformPoint(p, matrix);
    });
    var circles = transformedPoints.map(function(p){
      return new fabric.Circle({
        left: p.x,
        top: p.y,
        radius: 3,
        fill: "red",
        originX: "center",
        originY: "center",
        hasControls: false,
        hasBorders: false,
        selectable: false
      });
    });
    
    this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
  });
  
  canvas.add(polygon).renderAll();</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://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"&gt;&lt;/script&gt;
  &lt;p&gt;
  Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification.
  &lt;/p&gt;
  &lt;canvas id="c" width="600" height="400"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>Related Questions on SO:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/19854808/how-to-get-polygon-points-in-fabric-js">How to get polygon points in Fabric.js</a></li>
  <li><a href="https://stackoverflow.com/questions/20961546/truly-rotate-center-of-equilateral-triangle-in-fabric-js">Truly rotate center of equilateral triangle in Fabric.js</a></li>
  <li><a href="https://stackoverflow.com/questions/38712642/how-do-i-tranform-a-particular-point-which-has-been-modified-and-update-the-poin">How do I transform a particular point which has been modified and update the points array of polygon?</a></li>
  <li><a href="https://stackoverflow.com/questions/37722343/fabricjs-and-polygon-transformed-coordinates">FabricJs and Polygon transformed coordinates</a></li>
  <li><a href="https://stackoverflow.com/questions/38692570/how-to-multiply-each-point-with-objects-transform-matrix">How to multiply each point with object&#39;s transform matrix?</a></li>
  <li><a href="https://stackoverflow.com/questions/38567332/how-do-i-get-point-coordinates-after-object-modified">How do i get point coordinates after object modified?</a></li>
  </ul>