Merge branch 'gh-pages' of github.com:fabricjs/fabricjs.com into gh-p…

…ages

posts/_posts/2018-2-10-using-transformations.html

@@ -10,7 +10,7 @@ <h2 id="introduction_to_fabricjs">Using transformations, introduction to FabricJ
   <p>Understanding how transformations work on fabricJS is a key aspect to code your application as smoothly as possible.</p>
   <h3>Methods and properties related to transformations</h3>
   <p>Those are the methods you should learn to use most if you plan to understand and use fabricJS transformations with custom code.<br />
-  Generally speaking in this page we refer as matrix as an array of 6 numbers that represent a transformation on the plane and as point as
+  Generally speaking in this page we refer to <code>matrix</code> as an array of 6 numbers that represent a transformation on the plane and to <code>point</code> as
 a simple JS object that looks like { x: number, y: number }, or a fabric.Point class instance. ( often it does not make difference )</p>
 <pre>
 Canvas:
@@ -24,17 +24,17 @@ <h3>Methods and properties related to transformations</h3>
 - matrix = fabric.util.invertTransform(matrix);
 - options = fabric.util.qrDecompose(matrix);</pre>
   <h3>Moving from one space to another</h3>
-    <p>Using fabricJS you often have to interact with coordinates and position, but understaing where those coordinates are, can be troublesome if you do not have the right background.<br />
-    I'm going to list the transfomation and their use and then i ll try to make 2 examples to clarify better what happen, and how to do it.</p>
-    <p>Canvas.viewportTransform , move a point of your virtual canvas to the zoom and pan space. <br />
-    A point that is at position P when the canvas is not zoomed and not panned, after applying a zoom and pan represented from the viewportTransfrom M, can be found at cooridantes:<br />
+    <p>Using fabricJS you often have to interact with coordinates and position, but understanding where those coordinates are can be troublesome if you do not have the right background.<br />
+    I'm going to list the transformation and its usage and then I'll try to make 2 examples to clarify better what happened, and how to do it.</p>
+    <p>Canvas.viewportTransform: Move a point of your virtual canvas to the zoom and pan space. <br />
+    A point that is at position P when the canvas is not zoomed and not panned, after applying a zoom and pan represented from the viewportTransfrom M, can be found at cooridinates:<br />
     <code>newP = fabric.util.transformPoint(P, canvas.viewportTransform);</code></p>
-    <p>Object.calcTransformMatrix, returm the matrix that represent the generic object transform of that particular moment ( influenced by top,left,scale and many other properties ),
+    <p>Object.calcTransformMatrix: Returns the matrix that represents the generic object transform at that particular moment ( influenced by top, left,s cale and many other properties ),
     and moves points from object space to canvas space, not zoomed. So given a point in the object space coordinates that is at coordinates P, the point will be drawn on the canvas at:<br />
     <code>newP = fabric.util.transformPoint(P, object.calcTransformMatrix());</code></p>
   <h3>Transforms order</h3>
-    <p>Fabric during rendering apply transformations in this order:<br />
-    <code>zoom and pan => object transformation => nested object ( group ) => nested object deeper ( nested groups )</code></p>
+    <p>During rendering, Fabric applies transformations in this order:<br />
+    <code>zoom and pan => object transformation => nested object ( group ) => additionally nested objects ( nested groups )</code></p>
   <h3>Reverting order</h3>
     <p>The invertTransform utility is used to move back in the transformation logic in order to do some reverse calculation:<br />
     Imagine you want to mark an object is on your canvas, with a mouse click, in the point clicked. You click at point P, for that is for example 10,10 pixels on the element.
@@ -67,9 +67,9 @@ <h3>Understanding the effect of a matrix</h3>
 </pre>
     <p>The function gives back one of the possible solution for this matrix, putting as constrain a skewY to 0.</p>
   <h3>A real use case</h3>
-  <p>One developer wants to group objects togheter, but keep them free at the same time. Ideally when a main object moves he wants some other objects to follow it.<br />
+  <p>One developer wants to group objects together, but keep them free at the same time. Ideally when a main object moves he wants some other objects to follow it.<br />
     To explain this example i will call the main object BOSS and the other MINIONS.<br />
-    So let's imagine to have some objects around the canvas and we can move them freely. At some point we want to lock theyr relative position and scale togheter and move one.
+    So let's imagine to have some objects around the canvas and we can move them freely. At some point we want to lock theyr relative position and scale together and move one.
     When we setup the position we want, the BOSS position is described by a MATRIX, as we learned till now, and each minion too.<br />
     I m sure it exist a matrix that defines the necessary transformation to move from the boss to the minion, and i have to find it.</p>
 <pre>