Demonstrating translation, rotation, and scaling
These three 2D transformation techniques are quite useful:
Translation means changing the position of the origin
(0,0)of the contextRotation means moving the context by a particular angle
Scaling means changing the size of the drawing along the x axis and/or along the y axis
All three techniques are demonstrated in our new recipe whose output looks like this:
How to do it…
The following code does the job.
The HTML code:
<html> <head> <title>Translate, rotate and scale</title> <script src="TRS.js"></script> </head> <body onload="drawTRS();"> <table border="1" align="center" bgcolor="lightyellow"> <caption><b>Translation, Rotation and Scaling</b></caption> <tr> <td><canvas id="can0" width="300" height="200"></canvas><br/> <b><label id="lbl0"></label></b> </td> <td><canvas id="can1" width="300" height...
