Meet the Transformation Methods
Understand how to use the key canvas transformation methods translate, scale, and rotate to manipulate drawings effectively. Learn how to shift the canvas origin, resize shapes, and rotate text or graphics. Discover how combining these transforms allows for complex effects by modifying the internal transformation matrix used by the canvas.
We'll cover the following...
The three methods you have for transforming your canvas are translate, scale, and rotate. In the following sections, let’s look at how to use these methods.
Translating
If you want to shift your canvas and everything that gets drawn, you have the the translate method:
The x and y arguments specify the number of pixels to shift your canvas horizontally and vertically by. Below is a simple example of what this looks like:
This above code draws a circle and a square to our canvas. The call to the translate method at the top shifts both of the shapes over by 50 pixels.
The entire canvas and the origin (0, 0) position is shifted, so all ...