CanvasRenderingContext2D.rotate

The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the transformation matrix.

Syntax

void ctx.rotate(angle);

Parameters

angle

The rotation angle, 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, you will need to move the canvas by using the translate() method.

Examples

Rotating a shape

This example rotates a rectangle by 45 degrees.

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.

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• The interface defining this method: CanvasRenderingContext2D