Rotate graphics which will be drawn.
■リスト1:Parameter
angle
Specify rotation angle by radian. Graphics which will be drawn will rotate clockwise.
2.Note
Invoking this method changes current transformation matrix, therefore graphics which will be drawn will rotate. For example you can draw graphics which is rotated 30 degrees or 60 degrees around the origin of coordinates. You can set minus value to angle parameter to rotate anti-clockwise.
Graphics which is already there are not affected. Graphics which will be drawn will be affected.
The origin of coordinates is top-left of the canvas initially. You can set the origin of coordinates to use translate method. For example translate(100,100) moves the origin of coordinates to point (100,100), so the rotate method will refer point(100,100) as the origin of coordinates.
As the transformation matrix which rotate method changes is independent from the rotate method, It's accumulative to use the multiple rotate method. Invoking rorate(1) adds 1 radian rotation to the transformation matrix, so Invoking twice of rorate(1) means 2 radians rotation as a result.
You can use setTransform(1, 0, 0, 1, 0, 0) to change the transformation matrix to default. You can save the matrix and restore matrix using save method or restore method.
This is the list of methods which uses the transformation matrix.
- fillRect method
- strokeRect method
- fillText method
- strokeText method
- moveTo method
- lineTo method
- quadraticCurve method
- bezierCurve method
- arcTo method
- rect method
- arc method
This is the list of methods which changes the transformation matrix except for rotate method.- scale method
- translate method
- transform method
- setTransform method
3.Example
This sample shows triple rotation the character "竜" 30 degrees.

rotate sample
var canvas1 = document.getElementById('Canvas1');
var ctx = canvas1.getContext('2d');
ctx.font = '24pt Meiryo'
ctx.fillText('竜', 100, 40);
ctx.rotate(30 * Math.PI / 180);
ctx.fillText('竜', 100, 40);
ctx.rotate(30 * Math.PI / 180);
ctx.fillText('竜', 100, 40);
■リスト2:Following sample shows moving the origin of coordinates to point (100,100), and rotated circle around the point.
var canvas1 = document.getElementById('Canvas1');
var ctx = canvas1.getContext('2d');
ctx.translate(100, 100);
ctx.fillRect(-1, -1, 2, 2);
ctx.beginPath();
ctx.arc(50, 0, 10, 0, Math.PI * 2);
ctx.fill();
ctx.rotate(120 * Math.PI / 180);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(50, 0, 10, 0, Math.PI * 2);
ctx.fill();
■リスト3:Following sample shows complex circulative animation using rotate method.
Sample Page