HTML5 Canvas Reference - rotate()

The rotate() method does the rotate transformation.

The rotation will only affect drawings after calling the rotate method.

We must "translate" the point of origin to the center of our shape to rotate it around its own center

Browser compatibility


`rotate()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

context.rotate(angle);

Parameter Values

Parameter	Description
angle	The rotation angle, in radians.

To calculate from degrees to radians:

degrees * Math.PI / 180 To rotate 20 degrees, specify the following: 20 * Math.PI / 180

Example

The following code rotate text to be vertical.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from   w  w  w . j av  a 2s .com-->
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    ctx.save();
    ctx.translate(20, 50);
    ctx.rotate(-Math.PI / 2);
    ctx.fillText("java2s.com", 0, 0);
    ctx.restore();
</script> 

</body>
</html>

The code above is rendered as follows:

Example 2

The following code rotates the rectangle in 20 degrees.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--  w  ww .  ja  v  a  2 s .  c  om-->
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.rotate(20 * Math.PI / 180);
    ctx.fillRect(50, 20, 100, 50);
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to draw a star by rotating and translating the coordinate.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.translate(30, 30);<!-- w  ww.  j a  va  2  s .  c  om-->
    length = 15;
    ctx.rotate((Math.PI * 1 / 10));
    for (var i = 5; i--;) {
        ctx.lineTo(0, length);
        ctx.translate(0, length);
        ctx.rotate((Math.PI * 2 / 10));
        ctx.lineTo(0, -length);
        ctx.translate(0, -length);
        ctx.rotate(-(Math.PI * 6 / 10));
    }
    ctx.lineTo(0, length);
    ctx.closePath();
    ctx.stroke();
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to rotate context 45 degrees clockwise.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   <!--from  w w w . ja v  a 2 s .com-->
   var rectWidth = 150;
   var rectHeight = 75;
   
   // translate context to center of canvas
   context.translate(canvas.width / 2, canvas.height / 2);

   // rotate context 45 degrees clockwise
   context.rotate(Math.PI / 4);
   
   context.fillStyle = "blue";
   context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight);

</script>
</body>
</html>

The code above is rendered as follows: