Translate

This method is used to move the canvas and its origin to a different point in the grid.
translate(x, y)
This method takes two arguments. x is the amount the canvas is moved to the left or right, and y is the amount it’s moved up or down (illustrated by the image on the right).
It’s a good idea to save the canvas state before doing any transformations. In most cases, it is just easier to call the restore method than having to do a reverse translation to return to the original state. Also if you’re translating inside a loop and don’t save and restore the canvas state, you might end up missing part of your drawing, because it was drawn outside the canvas edge.

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>Canvas tutorial</title>
        <script>
            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();
            }
        </script>
    </head>
    <body onload="draw();">
        <canvas id="canvas" width="200" height="200">
        </canvas>
    </body>
</html>