<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<!-- Template generated by Exclaimer Signature Manager Exchange Edition on 10:15:19 Friday, 22 January 2016 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">P.ImprintUniqueID {
MARGIN: 0cm 0cm 0pt
}
LI.ImprintUniqueID {
MARGIN: 0cm 0cm 0pt
}
DIV.ImprintUniqueID {
MARGIN: 0cm 0cm 0pt
}
TABLE.ImprintUniqueIDTable {
MARGIN: 0cm 0cm 0pt
}
DIV.Section1 {
page: Section1
}
</style>
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal">My code below successfully rotates a drawing object at the center of the drawing object, but I want to understand happens behind the scenes:<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">1. ctx.translate(100, 100);<o:p></o:p></p>
<p class="MsoNormal">2. ctx.rotate(Math.PI / 4);<o:p></o:p></p>
<p class="MsoNormal">3. ctx.translate(-100, -100);<o:p></o:p></p>
<p class="MsoNormal">4. ctx.fillRect(50, 80, 100, 40);<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">https://html.spec.whatwg.org/multipage/scripting.html#current-transformation-matrix says transformations are performed in reverse order. Does that mean the execution order is 4, 3, 2, 1? Or 3, 2, 1, 4? More importantly, how does it work
exactly?<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">john<o:p></o:p></p>
</div>
<br>
<table class="ImprintUniqueIDTable" style="BORDER-COLLAPSE: collapse" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="WIDTH: 220px" valign="top" align="left"><a href="http://www.park.edu" target=""><img width="200" height="145" style="border: 0px Solid ; " src="cid:image08f985.JPG@2cc8618d.46ba3b12"></a></td>
<td valign="top" align="left"><font style="font-family:Times New Roman;font-size:14pt;color:#A32638;font-weight:bold;">John</font><font style="font-family:Times New Roman;font-size:14pt;color:#A32638;font-weight:bold;">
</font><font style="font-family:Times New Roman;font-size:14pt;color:#A32638;font-weight:bold;">Dean</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;"><br>
</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;">Associate Professor of Computer Science</font><br>
<font style="font-family:Times New Roman;font-size:11pt;color:Black;">Park University</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;"> -
</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;">Parkville</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;"> Campus</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;"><br>
</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;">Computer Science, Information Systems and Mathematics</font><br>
<font style="font-family:Times New Roman;font-size:11pt;color:Black;">8700 NW River Park Drive</font><br>
<font style="font-family:Times New Roman;font-size:11pt;color:Black;">Parkville</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;">,
</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;">MO</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;"> </font><font style="font-family:Times New Roman;font-size:11pt;color:Black;">64152</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;"><br>
</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;">816-584-6422</font><font style="font-family:Times New Roman;font-size:11pt;color:Black;"> (Office)</font><br>
<span style="font-family:Times New Roman;font-size:11pt;"><a href="mailto:John.Dean@park.edu" title="Click to send email to Dean, John" target="" style="font-family:Times New Roman;font-size:11pt;"><span style="font-family:Times New Roman; font-size:11pt;">John.Dean@park.edu</span></a></span></td>
</tr>
</tbody>
</table>
<br>
<font size="1"><em><font color="#000000" face="times New Roman">This e-mail message and any attached files are confidential and are intended solely for the use of the addressee(s) named above. If you are not the intended recipient or person responsible for
delivering this confidential communication to the intended recipient, you have received this communication in error, and any review, use, dissemination, forwarding, printing, copying, or other distribution of this e-mail message and any attached files is strictly
prohibited. If you have received this confidential communication in error, please notify the sender immediately by reply e-mail message and permanently delete the original message. Thank you.</font></em></font><br>
<br>
</body>
</html>