Método Canvas translate()
Definición y uso
translate() método para mapear la posición (0,0) en el lienzo.
Nota:Cuando llames a métodos como fillRect() al agregar valores a métodos como x y y en los valores de coordenadas.
Ejemplo
Dibujar un rectángulo en la posición (10,10), establecer la nueva posición (0,0) como (70,70). Dibujar nuevamente el rectángulo nuevo (notar que ahora el rectángulo comienza en la posición (80,80)):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
Sintaxis
context.translate(x,y);
Valor del parámetro
| Parámetro | Descripción |
|---|---|
| x | Añadir el valor al eje horizontal (x). |
| y | Añadir el valor al eje vertical (y). |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
