Transformations
The Canvas API contains four methods for transforming how things are drawn on the canvas. They change the coordinate system of the canvas so that when you draw something, it draws at a different place than it normally would. Think of it as taking a piece of paper and moving it or rotating it before drawing on it.
translate(x, y)
: This translates anything drawn on the canvas by the values specified. The values can be any decimal number. Negative numbers translate up and to the left. Often you will usetranslate()
to translate to the center of a shape before applying other transformations to it.scale(x, y)
: This scales anything drawn to the canvas by the values specified. The parameters can be any positive decimal number. If you wanted everything to be drawn half size, you would use scale (0.5, 0.5). If you wanted to double the size, scale (2, 2).rotate(angle)
: This rotates the canvas by an angle. The angle is specified in radians from 0 to 2π. Negative numbers will rotate...