The CanvasRenderingContext2D.rotate()
method of the Canvas 2D API adds a rotation to the transformation matrix.
The CanvasRenderingContext2D.rotate()
method of the Canvas 2D API adds a rotation to the transformation matrix.
js
rotate(angle)
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.
None (undefined
).
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>
js
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);
The center of rotation is blue. The non-rotated rectangle is gray, and the rotated rectangle is red.
This example rotates a shape around its center point. To do this, the following steps are applied to the matrix:
translate()
moves the matrix's origin to the shape's center. rotate()
rotates the matrix by the desired amount.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>
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).
js
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);
The non-rotated rectangle is gray, and the rotated rectangle is red.
Specification |
---|
HTML Standard # dom-context-2d-rotate-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
rotate |
1 | 12 | 1.5 | 9 | ≤12.1 | 2 | 4.4 | 18 | 4 | ≤12.1 | 1 | 1.0 |
CanvasRenderingContext2D
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate