Canvas rotate() method

Definition and usage

rotate() Method to rotate the current drawing.

Example

Rotate the rectangle by 20 degrees:

Your browser does not support the HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);

Try it yourself

Syntax

context.rotate(angle);

Parameter value

Parameter Description
angle

Rotation angle, measured in radians.

To convert an angle to radians, please use the formula degrees * Math.PI / 180 for calculation.

Example: To rotate 5 degrees, you can specify the following formula: 5 * Math.PI / 180.

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.