ROTATE THE X- AND Y-AXES
You can rotate the entire canvas two-dimensional drawing plane, which makes drawing objects at a specific angle much easier as the number line the x- and y-axes follow is actually altered. For example, rotating a 100 × 100 canvas by 45° will move point (0, 100) from the far right, to the near bottom-right corner; point (50, 50) moves from the exact center to the middle of the left-side border.
Regardless of whether you need to rotate a shape 180°, 45°, or 1°, do not spend your time calculating the shape’s absolute coordinates rotated at an angle; just rotate the axes themselves.
All rotations occur around the origin point. Therefore, unless you first use translate(), your rotation will pivot around the top left of the ...
Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
