O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required