Summary -

In this topic, we described about the Canvas Rotate with detailed example.

The rotate() method rotates the present drawing. We can use the rotate() transform technique to rotate the drawing. HTML5 canvas offers rotate(angle) process to rotate the canvas around the existing origin.

This process takes one parameter angle and the canvas is rotated by angle. The rotation is a clockwise rotation calculated in radians. The rotate needs an angle in radians.

To define the rotation point, we need to provide the top left corner of the context lies on the desired rotation point.

Note! The rotation will only affect to the drawings after the rotation is completed.

Syntax -

context.rotate(angle);

Parameter Description
angle The rotation angle in radians.
To analyse from degrees to radians: degrees*Math.PI/180.
Example - To rotate 8 degrees, specify the following: 8*Math.PI/180

Example-

The following example describes the rotate the rectangular 45 degrees and 90 degrees rotated text.
<!DOCTYPE html>
<html>
  <body>
     <canvas id="myCanvas" width="450" height="220" 
                   style="border:2px solid #00d3d3;">
         Your browser does not support the HTML5 canvas tag.
     </canvas>
     <script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle  ="#329ea8";
        ctx.rotate(45*Math.PI/180);
        ctx.fillRect(80, 5, 100, 50);
        // Text ctx.rotate(45*Math.PI/180);
        ctx.font = "bold 24px Helvetica, Arial, sans-serif";
        ctx.fillStyle  =  "steelblue";
        ctx.fillText("Rotated  text",  50,  0);
     </script>
  </body>
</html>

Output-

Your browser does not support the HTML5 canvas tag.

Browser Support

The following browsers with versions in the table indicates the initial browser version that completely endorses the property.

Property Chrome Edge Firefox Safari Opera
Rotate( ) Yes 9.0 + Yes Yes Yes