HTML5 Canvas rotation transformation tutorial

how to rotate an image by using html5 Canvas rotation transformation

In this tutorial we describe how to rotate an image or text or shape by using html5 canvas rotationtransformation.HTML5 Canvas support three types of transformation .Transformation stands for change, this transformation(change) can be of three types. Change of context placement(translation),change of size(scaling) and change of angle(rotation).The three types of transformation in HTML5 Canvas are:

translation
scaling
rotation

`rotation`

rotation is one kind of transformation in HTML5 Canvas by which we can rotate an object by usingrotate()method. The rotate() method use parameter of angle given in radian
The code for rotate() method using html5 canvas will be.
context.rotate();
To define the rotation point about which rotation took place, we first translate canvas context to a point where top left of the context lies .In this tutorial we have translate(moved) the canvas context such that the top left corner of the context is directly on the center of the rectangle ,this rectangle will be rotated about its center
—————————————————————-

Complete code for html5 canvas rotation transformational using `rotate( )`method



<!DOCTYPE html>
<html>
    <head>
        <title>html5 canvas tutorial using rotatition transformation </title>
    </head>
    <body>
        <canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
        </canvas>
        <script>
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
            var rectWidth = 150;
                var rectHeight = 75;

                / translate context to center of canvas
                context.translate(canvas.width/2, canvas.height/ 2);

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

            
        </script>

        
    </body>
</html>

————————————————————–
=================================================================

html5 canvas rotation transformationtutorial using`rotate()` method

===============================================================