Canvas rotate() Method
Example
Rotate the rectangle 20 degrees:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);
Try it Yourself »
Description
The rotate()
method rotates the context.
Note
The rotation will affect drawings AFTER the rotation method is called.
See Also:
The scale() Method (Scale the context)
The translate() Method (Remap the 0,0 position)
The transform() Method (Scale, rotate, move, skew context)
The setTransform() Method (Scale, rotate, move, skew context).
Syntax
context.rotate(angle) |
Parameter Values
Param | Description | Play it |
---|---|---|
angle | The rotation angle in radians Radians = degrees*Math.PI/180. To rotate 5 degrees: 5*Math.PI/180 |
Play it » |
Return Value
NONE |
Browser Support
The <canvas>
element is an HTML5 standard (2014).
rotate()
is supported in all modern browsers:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference