El método HTML canvas translate() se usa para especificar que el objeto se traduce según la cantidad de traducción dada.
Sintaxis:
context.translate(x, y)
Valores paramétricos:
- x: Almacena el valor, que cuánto se moverá el lienzo hacia la izquierda o hacia la derecha significa en el eje x.
- y: almacena el valor, cuánto se moverá el lienzo hacia arriba y hacia abajo significa el eje y.
Ejemplo 1: aquí puede verificar cambiando el eje x y el eje y.
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas translate() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<canvas id="GFG" width="500" height="250"
style="border:2px solid gray">
</canvas>
<script>
var geeks = document.getElementById("GFG");
var contex = geeks.getContext("2d");
contex.translate(250, 110); //contex.translate(x, y);
contex.fillStyle = "#00FF00";
contex.fillRect(20, 20, 150, 100);
</script>
</center>
</body>
</html>
Salida: 
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas translate() Method
</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<canvas id="GFG" width="500" height="250"
style="border:2px solid gray">
</canvas>
<script>
var geeks = document.getElementById("GFG");
var contex = geeks.getContext("2d");
contex.rect(00, 00, 150, 100);
contex.fillStyle = "green";
contex.fill();
contex.stroke();
contex.translate(250, 50);
contex.rect(100, 100, 150, 100);
contex.fillStyle = "";
contex.fill();
contex.stroke();
</script>
</center>
</body>
</html>
Salida: 
Nota: Si llama al método fillRect() después del método translate(), el valor se suma a los valores de las coordenadas x e y.
Navegadores compatibles:
- Google Chrome
- Internet Explorer 9.0 o superior
- Firefox
- Safari
- Ópera