The CanvasRenderingContext2D
.rotate()
method of the Canvas 2D API adds a rotation to the transformation matrix.
Syntax
void ctx.rotate(angle);
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/233/e5cf76a765bf0958896716419519df34/Canvas_grid_rotate.png|class=internal]]
Parameters
angle
- The rotation angle, clockwise in radians. You can use
degree * Math.PI / 180
to calculate a radian from a degree.
The rotation center point is always the canvas origin. To change the center point, you will need to move the canvas by using the translate()
method.
Examples
Rotating a shape
This example rotates a rectangle by 45°. Note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Point of transform origin ctx.arc(0, 0, 5, 0, 2 * Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); // Non-rotated rectangle ctx.fillStyle = 'gray'; ctx.fillRect(100, 0, 80, 20); // Rotated rectangle ctx.rotate(45 * Math.PI / 180); ctx.fillStyle = 'red'; ctx.fillRect(100, 0, 80, 20); // Reset transformation matrix to the identity matrix ctx.setTransform(1, 0, 0, 1, 0, 0);
Result
The center of rotation is blue. The non-rotated rectangle is gray, and the rotated rectangle is red.
Rotating a shape around its center
This example rotates a shape around its center point. To do this, the following steps are applied to the matrix:
- First,
translate()
moves the matrix's origin to the shape's center. rotate()
rotates the matrix by the desired amount.- Finally,
translate()
moves the matrix's origin back to its starting point. This is done by applying the values of the shape's center coordinates in a negative direction.
HTML
<canvas id="canvas"></canvas>
JavaScript
The shape is a rectangle with its corner at (80, 60), a width of 140, a height of 30. Its horizontal center is at (80 + 140 / 2), or 150. Its vertical center is at (60 + 30 / 2), or 75. Thus, the center point is at (150, 75).
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Non-rotated rectangle
ctx.fillStyle = 'gray';
ctx.fillRect(80, 60, 140, 30);
// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);
// Rotated rectangle
ctx.fillStyle = 'red';
ctx.fillRect(80, 60, 140, 30);
Result
The non-rotated rectangle is gray, and the rotated rectangle is red.
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasRenderingContext2D.rotate' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rotate
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support 1.5 |
IE
Full support Yes |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.rotate() by Mozilla Contributors is licensed under CC-BY-SA 2.5.