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 use translate() 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 counterclockwise.
  • transform(a, b, c, d, e, f): If none of the other transformation methods work for you, you can use transform() to create your own. I wouldn't recommend it unless you know how to use transformation matrices.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.14.6.194