Meet the Transformation Methods

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 ...