Canvas rotate(): Rotate Shapes Around the Origin or a Pivot
rotate(angle) adds a clockwise rotation to the current Canvas transformation matrix. The angle is measured in radians, and rotation happens around the current origin.
Rotate a rectangle Top ↑
const angle = 30 * Math.PI / 180;
ctx.save();
ctx.rotate(angle);
ctx.fillRect(80, 20, 140, 45);
ctx.restore();Convert degrees to radians Top ↑
const radians = degrees * Math.PI / 180;
ctx.rotate(radians);Rotate around the center of a shape Top ↑
Canvas rotates around the origin. To rotate around a rectangle center, translate to the center, rotate, draw the rectangle around local coordinates, and restore.
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(-width / 2, -height / 2, width, height);
ctx.restore();Rotation accumulates Top ↑
Each rotate() call modifies the current transformation matrix. Repeated clicks in the legacy example kept rotating because the transform was never restored. Prefer save()/restore() for isolated drawings.
Frequently asked questions Top ↑
Which direction does Canvas rotate()? Top ↑
Positive angles rotate clockwise in the Canvas coordinate system.
Does rotate() use degrees? Top ↑
No. The angle is in radians.
Why does my shape rotate around the top-left corner? Top ↑
The default origin is at (0,0). Translate to the intended pivot before rotating.
How do I stop rotations from accumulating? Top ↑
Use save() before the transform and restore() afterward, or resetTransform() when appropriate.
Does rotate() move pixels already drawn? Top ↑
No. It affects subsequent drawing operations through the transformation matrix.
Related Canvas transformation tutorials Top ↑
translate() | transform() | Canvas tutorial
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
