The CanvasRenderingContext2D
.rotate()
method of the Canvas 2D API adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
Syntax
void ctx.rotate(angle);
Parameters
angle
- The angle to rotate clockwise in radians. You can use
degree * Math.PI / 180
if you want to calculate from a degree value.
The rotation center point is always the canvas origin. To change the center point, we will need to move the canvas by using the translate()
method.
Examples
Using the rotate
method
This is just a simple code snippet which uses the rotate
method.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rotate(45 * Math.PI / 180); ctx.fillRect(70, 0, 100, 30); // reset current transformation matrix to the identity matrix ctx.setTransform(1, 0, 0, 1, 0, 0);
Edit the code below and see your changes update live in the canvas:
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.rotate' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
See also
- The interface defining it,
CanvasRenderingContext2D