Explain multiplied-out coordinates for canvas transforms

Closes https://www.w3.org/Bugs/Public/show_bug.cgi?id=28333.

Author: domenic

source

@@ -56,7 +56,7 @@
    .applies td { text-align: center; }
 
    .matrix, .matrix td { border: hidden; text-align: right; }
-   .matrix { margin-left: 2em; }
+   .matrix, .equations { margin-left: 2em; }
 
    .vertical-summary-table tr > th[rowspan="2"]:first-child + th,
    .vertical-summary-table tr > td[rowspan="2"]:first-child + td { border-bottom: hidden; }
@@ -62711,6 +62711,37 @@ try {
 
   </div>
 
+  <div class="note">
+   <p>Given a matrix of the form created by the <code
+   data-x="dom-context-2d-transform">transform()</code> and <code
+   data-x="dom-context-2d-setTransform">setTransform()</code> methods, i.e.,</p>
+
+   <table class="matrix">
+    <tr>
+     <td><var>a</var></td>
+     <td><var>c</var></td>
+     <td><var>e</var></td>
+    </tr>
+    <tr>
+     <td><var>b</var></td>
+     <td><var>d</var></td>
+     <td><var>f</var></td>
+    </tr>
+    <tr>
+     <td>0</td>
+     <td>0</td>
+     <td>1</td>
+    </tr>
+   </table>
+
+   <p>the resulting transformed coordinates after transform matrix multiplication will be</p>
+
+   <p class="equations">
+    <var>x</var><sub>new</sub> = <var>a</var> <var>x</var> + <var>c</var> <var>y</var> + <var>e</var><br>
+    <var>y</var><sub>new</sub> = <var>b</var> <var>x</var> + <var>d</var> <var>y</var> + <var>f</var>
+   </p>
+  </div>
+
 
 
   <h6>Image sources for 2D rendering contexts</h6>