Translate is one of the canvas transformation methods .This method is used to shift the canvas and its origin point to various points in the matrix .
translate(x, y)
This method will take two arguments where the variable x denotes the movement of the element left or right and the y variable denotes the movement of the element up or down. It is a good practice to save the canvas states they can be invoked when there is necessary to be called once again .
Translate Example
This below example shows a demo of the translating example .A function drawspirograph is used to draw spirograph patterns .
If the translate function is not used then only a quarter pattern will be seen .Translate function helps us to place the m anywhere on the canvas and there is no need to move them manually in the spirograph function .
In this example the function drawspirograph is called nine times by using two “for” loops.In both the cases the translation is done in the canvas element and a spirograph is drawn , and finally canvas is returned back to the original state.
<pre>function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0,0,300,300);
for (var i=0;i<3;i++) {
for (var j=0;j<3;j++) {
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50+j*100,50+i*100);
drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
ctx.restore();
}
}
}
function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}</pre>
