Canvas translate and rotate

Translate:

By using Translate () method can move Entire canvas from original point to another point.Original X=0 and Y=0 point is the top left corner of the campus,from here we calculate our X and Y value.Now we already draw a custom shape which have several X and Y value,But we want to move our entire custom shape from one place to other without changing the all of X and Y value.We can do by using translate methods.

Translate method takes two parameter X and  Y value.This two value is the next origin point of canvas,

See the Graph.

sorry your browser doesnot support canvas tag.

<canvas id="tran" width="400px" height="300px">
sorry your browser doesnot support canvas tag.
</canvas>

<script type="text/javascript">
var sex=document.getElementById("tran");
var sec=sex.getContext("2d");

//old origin point.
sec.strokeStyle="green";
sec.fillStyle="gray";
sec.lineWidth=5;

sec.beginPath();

sec.moveTo(0,0);

sec.lineTo(0,sec.canvas.height);
sec.moveTo(0,0);
sec.lineTo(sec.canvas.width,0);
sec.stroke();

sec.fillRect(10,10,150,125);
sec.strokeStyle="red";
sec.beginPath();
sec.moveTo(200,125);
sec.fillText("X=0,Y=0",200,120);
sec.lineTo(200,sec.canvas.height);
sec.stroke();
sec.moveTo(200,125);

sec.lineTo(sec.canvas.width,125);
sec.stroke();
sec.translate(200,125);
sec.fillRect(10,10,150,125);


</script>

Description:

Firstly we draw a rectangular both 10px far from both X and Y.Then we called translate () method and set new origin position(origin position is a position from where X and Y is counted ) .Soon after we again draw same rectangular with same distance from origin point but this time rectangular counts from its new origin defined by translate function.

Rotate:

We can rotate  anything by using rotate () method.It takes one parameter which is angels.Remember,In canvas angels are radians.A full radians is 180 degree.If you want to rotate in angle then you have to divide the radians with angels.Suppose you want 45 degree of  angels so you can divide radians /4 the result would be 45.

Structure:rotate(Math.PI / 4);

Here Math.PI is  represents radians and its full means equal to 180 degree.

Another convenient way you can convert radians into angels are 

var angel=(Math.PI /180)* your desire angel like 25;

Here you first part Math.PI/180 will gives you 1 degree equivalent radians and then you multiply with your given degree here 25 so now you get 25 degree and store it in a variable called angel.everytime you use rotation just give your desire degree and it will done all work to convert radians to angel.

Lets code:

sorry your browser doesnot support canvas tag.

Rotatation Origin:

In the first circle rotate 45 degree from its origin point and its origin point is where  x=0 and Y=0; which is top left corner.One Tricks to remember that if you rotate then rotatation will occer in canvas not shape.Shapes still  maintain X and Y values .(Suppose you stand on a chair and if chair rotate some degree that will not change your X and Y position on chair but due to chairs rotations your position will change.)Please saw the second rectangular rotation and you may notice that that rectangular hold the same x and y but due to canvas rotation it looks different.

Code Hints.Before first gray rectangular  rotation i save the current situation by calling save () method.Otherwise our all of the drawing will rotate.So we can restore our canvas any time in future and we did this before second  green rectangular.The second rect origin point is changed by translate  () method.So it start rotating based on current X and Y 0 position.

The Code.

sljfd

<canvas height="400px" id="rote" style="border: 2px solid #800;" width="600px">
sorry your browser doesnot support canvas tag.
</canvas>

<script type="text/javascript">
var sex=document.getElementById("rote");
var sec=sex.getContext("2d");

  //old origin point.
  sec.strokeStyle="green";
  sec.fillStyle="gray";
  sec.lineWidth=5;
sec.save();
  
  sec.rotate(Math.PI / 4);
  
  sec.fillRect(10,10,150,125);
  sec.strokeStyle="red";
sec.restore();
  sec.beginPath();
  sec.moveTo(200,125);
  sec.fillText("X=0,Y=0",200,120);
  sec.lineTo(200,sec.canvas.height);
  sec.stroke();
  sec.moveTo(200,125);
  
  sec.lineTo(sec.canvas.width,125);
  sec.stroke();
sec.restore();
var angel=(Math.PI /180)*45;

  sec.translate(200,125);
sec.rotate(angel);

     sec.fillStyle="green"
    sec.fillRect(10,10,150,125);
  

</script>

Rotate Complete Project

Your browser does not support canvas.

<!DOCTYPE html>
<html>
<head>
<title>The Rotate Transform</title>
<style type="text/css">
canvas {
border: dotted 1px black;
margin: 25px;
}
</style>
<script type="text/javascript">
 window.onload = function () {
 var theCanvas = document.getElementById('Canvas1');
 if (theCanvas && theCanvas.getContext) {
  var ctx = theCanvas.getContext("2d");
    if (ctx) {
                 ctx.fillStyle="green";
                         ctx.strokeStyle="red";

    ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
    var radian=(Math.PI / 180) * 20;
for (var degrees = 0; degrees < 360; degrees += 20) {
ctx.rotate(radian);
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.stroke();
}//End of for loop
           }
       }
   }
</script>
</head>
<body>
<h1>The Rotate Transform</h1>

<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>