THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas rotate() Method

❮ HTML Canvas Reference

Example

Rotate the rectangle 20 degrees:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
rotate() Yes 9.0 Yes Yes Yes

Definition and Usage

The rotate() method rotates the current drawing.

Note: The rotation will only affect drawings made AFTER the rotation is done.

JavaScript syntax: context.rotate(angle);

Parameter Values

Parameter Description Play it
angle The rotation angle, in radians.

To calculate from degrees to radians: degrees*Math.PI/180.
Example: to rotate 5 degrees, specify the following: 5*Math.PI/180
Play it »

❮ HTML Canvas Reference