From the course: Learning HTML Canvas

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using rotation

Using rotation

From the course: Learning HTML Canvas

Start my 1-month free trial

Using rotation

“

- [Instructor] The rotate transform causes subsequent drawing operations to be rotated by a given angle. And remember, we're talking about radians here, the canvas doesn't use degrees. If you want to use degrees, then you need to perform your own calculations to convert them into radians. It's also important to note that rotation takes place around whatever the current origin of the canvas is, not the center of an object that you're about to draw. If you want to rotate around an object's center, or for that matter around any other point on the canvas, you should use the translate transform we saw earlier to move the origin to the object center, or whatever point you want to rotate around. And then perform the rotation, and then translate the origin back. The rotate transform takes just one argument, and that's the angle argument. The angle argument specifies the amount to rotate the drawing operations that come after you set the rotation transform. So let's try this out in some code…

Contents