Summary: in this tutorial, you’ll learn how to use the JavaScript rotate() method to rotate drawing objects.
Introduction to JavaScript rotate() canvas API
The rotate() is a method of the 2D drawing context. The rotate() method allows you to rotate a drawing object on the canvas.
Here is the syntax of the rotate() method:
ctx.rotate(angle)Code language: CSS (css)The rotate() method accepts a rotation angle in radians.
If the angle is positive, the rotation is clockwise. In case the angle is negative, the rotation is counterclockwise.
To convert a degree to a radian, you use the following formula:
degree * Math.PI / 180Code language: JavaScript (javascript)When adding a rotation, the rotate() method uses the canvas origin as the rotation center point.
The following picture illustrates the rotation: